Die Pseudoklassen :before und :after funktionieren erst seit IE8.
Die beste Art die Bilder unterzubringen ist eigentlich wirklich als Hintergrundbild im CSS. Spricht irgendwas dagegen, die Bilder über die Eigenschaft background direkt an den Hyperlink in den Listenelementen zu hängen?
Code:
a.pg-home {
background: #rrggbb url("/tl_files/harzhirt/themes/01-green/icons/icon_home.png") no-repeat left center;
padding-left: 20px; /* entspricht etwa der Breite des Bildes */
}
Ich gestalte Navigationen eigentlich meist lieber über die Links als über die <li>s.
Wenn du bei den Listenelementen bleiben willst, dann probiere statt der Eigenschaft list-style-image (was eigentlich für den Job gedacht ist) auch hier mal background für das Bild. Damit hast du zumindest ansatzweise die Möglichkeit, die Grafiken zu positionieren. Zum Beispiel so:
Code:
li.pg-home {
list-style-type:none;
background: #rrggbb url("/tl_files/harzhirt/themes/01-green/icons/icon_home.png") no-repeat left center;
padding-left: 20px; /* entspricht etwa der Breite des Bildes */
}
#rrggbb steht für eine Hintergrundfarbe. Das padding-left macht Platz für die Grafik. Statt center kannst du auch Angaben in Prozent oder Pixel machen.
Lesezeichen