Transparente PNG-Grafiken im IE 6 richtig darstellen

PNG, Transparent, Internet Explorer, HTML

Wer kennt das nicht.
Man erarbeitet ein schönes Template für seine Website und hat evtl. noch einen Schlagschatten angebracht. Die Dateien als gif speichern geht nicht direkt, weil das gif-Format den Schlagschatten mit transparentem Hintergrund schlecht darstellt. Um nun ein optimalen Effekt hinzubekommen muss man die Files als *.png abspeichern.
Aber da gibt es Probleme. Das Template sieht nach dem Umsetzen in HTML nicht schön aus, weil der Internet Explorer 6 die erstellten PNG-Dateien falsch darstellt.

Es gibt aber eine Möglichkeit um transparante Grafiken im IE6 darzustellen. Man benötigt dafür sogenannte IE-Hacks.

Ich war lange auf der Suche nach einen funktionierenden Hack für PNG-Dateien. Es gibt viele Möglichkeiten. Aber nur eine hat bei mir richtig funktioniert. Diese Version hab ich bei twinhelix.com gefunden.

Die Datei iepngfix.htc wird in der HTML-Datei einfach in den Headbereich eingebunden:

<style type="text/css">
img, div, a, input { behavior: url(iepngfix.htc) }
</style>

Jetzt werden alle Grafiken ordentlich dargestellt.
Ich habe euch mal eine Beispieldatei angehangen. Somit habt Ihr gleich eine Vorlage/Beispiel.

iepngfix.zip

PNG im IE 6 richtig darstellen

37 K