CSS: Text-Schatten bzw. Schatten im Internet Explorer

Geposted am Dezember 18th, 2010 von Whykiki. Abgelegt unter Webdesign.

Wie so oft kocht Microsoft seine ganz eigene Suppe. Seit Stunden habe ich nun versucht die CSS-Eigenschaft “text-shadow” anzuwenden. Mittlerweile ist sie ja ganz gebräuchlich und ich ging davon aus, dass diese also auch in den aktuellen IE-Versionen unterstützt wird. Aber wie immer: Pustekuchen!

Es heisst also warten auf den kommenden IE9 oder man muss sich mit Workarounds behelfen. Das ist aber leichter gesagt als hinterher wirklich getan. Denn zwar gibt es den MS-eigenen Filter “dropshadow” aber auch der wollte bei mir, angewendet auf ein Listenelement bzw. eine h2-Überschrift nicht funktionieren.

Der Hintergrund dabei: Anscheinend muss man dem Element die Eigenschaft “hasLayout” verpassen, die mir vor wenigen Wochen auch noch völlig unbekannt war. Dies kann man im speziellen Fall erreichen, wenn man “zoom:1;” einsetzt. Wieder so eine MS-eigene Kacke, aber es funktioniert.

Wer weitere Informationen zu “hasLayout” haben will, sollte hier einmal nachschauen, denn dieses “vergeben von Layout” bzw. “nicht vergeben” ist eine der Hauptursachen für viele Darstellungsfehler im Internet Explorer. So lassen sich zum Beispiel viele Dinge erklären, wenn u.U. ein Hintergrundbild nicht weiter gekachelt wird u.s.w.
Manchmal reicht es aus diesem Element dann einfach “hasLayout” zu geben und alles wird gut.

Alle Infos zu “hasLayout” gibt’s hier. Bitte klicken!

Weiter geht’s hier aber dann noch einmal mit dem Textschatten für den IE.
Anhand eines Beispiels zeige ich auf, wie man den Schatten auch hier einsetzt.

#sidebar h2 {
text-shadow: 1px 1px 1px #000;
filter:dropshadow(color=#000, offx=1, offy=1);
zoom: 1;
}

Alle aktuellen Browser, bis auf den IE, verstehen die Eigenschaft “text-shadow”. Beim IE muss man dann mit dem Filter “filter:dropshadow” nachhelfen. Der aber wiederum geht nur, wenn man dem h2-Element “hasLayout” verpasst. Und das geht eben mit der Eigenschaft “zoom”, die sonst keinerlei Auswirkungen auf das Design hat.

So, bevor ich das nächste Mal wieder stundenlang suche, schaue ich lieber bei mir selber vorbei und finde die Erklärung ;-) Ich hoffe ich konnte euch auch helfen.

Tags: , , , , , , , , , ,



Trackback URI | Comments RSS

Hinterlasse deine Meinung