PNG Bilder im IE6
PNG-Bilder ermöglichen durch Transparenz grafisch ansprechende Designs zu erstellen. Leider unterstützt das nicht jeder Browser. Im speziellen wird die Transparenz in diesem Format nicht vom Internet Explorer 6 unterstützt. Man könnte sich jetzt nun dafür entscheiden den IE6 gar nicht erst zu verwenden, aber dieser Browser wird besonders in Deutschland noch von einigen Anwendern benutzt. Dies kommt daher, dass in der Wirtschaft noch alte Volumenlizenzen von Windows 2000 und Windows XP vorkommen, die mit IE6 ausgeliefert wurden.
Abhilfe schafft in diesem Fall ein kleines Javascript in Kombination mit einem CSS-Aufruf. Da man eh eine Browserweiche verwendet, kann man an dieser Stelle spziell für den IE6 eine CSS-Datei einbinden, welche bei Bedarf bestimmte Tags im HTML nach PNG-Dateien durchforstet und die Transparenz mit einem GIF-Pixel korrigiert, welche der IE zuvor nicht darstellen konnte.
Unter http://www.twinhelix.com/css/iepngfix/ kann der Fix heruntergeladen werden. Die Einbindung in die eigene Seite ist anschließend nicht sonderlich schwer.
Im Kopf der HTML-Seite kann nun das CSS für die Bowserweiche eingesetzt werden:
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6style.css" mce_href="css/ie6style.css" media="all" />
<![endif]-->
Vorausgesetzt der PNGFix ist im entsprechenden css/-Verzeichnis extrahiert worden, sollte im ie6style.css folgendes enthalten sein:
@media all {
img, div, input, a { behavior: url("iepngfix.htc") }
}
Wie schon zu erkennen ist wird hier in den entsprechenden HTML-Tags das Javascript im HTC-Container geladen. So werden schonmal alle in diesen Tags enthaltenen PNG-Bilder bearbeitet.
Wichtig ist noch, dass bei Hintergrundbildern von DIV-Layern evtl. eine Höhenangabe notwendig ist.
Kommentare
Einen Kommentar schreiben