Bissinger’s Blog

Auf der Suche nach einem Workaround für die Darstellung von transparenten PNG-Grafiken im Internet Explorer 6 findet man ja mittlerweile zig Webseiten im Netz. Hier möchte ich die bei mir wunderbar funktionierende Lösung präsentieren.

In erster Linie wollte ich kein JavaScript anwenden, weshalb schon viele Lösungen weggefallen sind. Eine Möglichkeit per CSS besteht in der Nutzung von Microsoft’s AlphaImageLoader-Filter, der durch DirectX bereitgestellt wird. Zu beachten ist, dass man den Code nur auf das background-Element im CSS beziehen kann. img-Tags werden davon nicht angesprochen. Per Conditional Comment wird der entsprechende CSS-Code speziell dem IE6 zugewiesen.

Wichtig bei der Filter-Angabe ist, dass man keine Leerzeichen verwendet. In einigen Anleitungen sind diese leider vorhanden und das Copy&Paste funktioniert dann natürlich nicht. Auch die Pfadangabe zu den Bildern unterscheidet sich zwischen dem Filter und dem background-Element im CSS.

<style type="text/css">
div#logo {
background-image: url(../images/logo.png);
}
</style>
<!--[if lte IE 6]>
<style type="text/css"><!
div#logo {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');
background: none;
}
</style>
<!--[endif]-->

Der Filter bietet unterschiedliche Möglichkeiten, das Bild zu skalieren. Über die Werte crop, image bzw. scale, die dem Element sizingMethod zugewiesen werden können, kann man das Bild auf folgende Weise skalieren:

• crop - Container und Bild behalten die angegebene Originalgröße
• image - Container wird auf die Bildgröße skaliert und enthaltener Text wird abgeschnitten (entspricht overflow:hidden) (Default-Wert)
• scale - Bild wird auf die Containergröße skaliert

Update: Auch img-Tags können per Inline-Styles transparent gemacht werden. Hierbei wird dann das src-Element überschrieben.

<img src="../images/logo.png" style="width: 200px; height: 80px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');" />

Und hier noch zwei Links mit ähnlicher Beschreibung/Anleitung. Einmal WebmasterPro.de und .devSOURCE.

Vor kurzem stand ich mal wieder vor dem Problem, dass innerhalb einer Domäne nicht jeder Rechner mit dem Internet Explorer 6 inkl. ServicePack 1 installiert war. Vor allem in Domänen mit Windows 2000-Clients kommt sowas immer mal wieder vor. Hier sind dann meist noch die Originalversionen 5 oder 5.5 installiert. Einige Programme, die man heutzutage dann vielleicht doch mal installieren möchte, benötigen jedoch meist mindestens die Version 6 oder gar die Version 6 inkl. SP1. Jetzt kann man sich natürlich relativ schnell die Version 6 inkl. SP1 bei Microsoft herunterladen und vor Ort händisch als Administrator installieren. Entweder direkt mit dieser Datei inkl. Internetzugang, oder als “Netzwerkinstallation” mit dem Gesamtpaket. Dieses erhält man, wenn man folgenden Befehl in die Eingabeaufforderung bzw. das Ausführen-Fenster eingibt: c:\ie6\ie6setup.exe /c:"ie6wzd.exe /d /s:""#E". Laufwerk “C” und der Ordner “ie6″ sollten wenn möglich existieren und auch die heruntergeladene Datei sollte darin liegen. Man wird dann nach dem ausführen gefragt, wo die Installationsdateien gespeichert werden sollen. Nach dem Download hat man alle nötigen Dateien in dem Ordner, um über die ie6setup.exe ohne Internet-Zugang die Version zu installieren. Geht ganz einfach… vor allem, wenn man auf diese Turnschuh-Administration steht.

(more…)