Transparente PNGs für den Internet Explorer 6
Mittwoch, 27. August 2008
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.
Eine ganze Zeit lang war es möglich, die Fritz-Box als Alternative zum IAD-”Modem” von Alice zu nutzen. Das ganze war zwar nicht wirklich einfach einzurichten, da dazu erst die Firmware der Fritz-Box verändert bzw. freigeschaltet werden musste, aber es funktionierte. Sogar ziemlich gut, wie ich aus eigener Erfahrung berichten kann. Eine 
Melde mich nach langem warten mal wieder mit einem neuen Artikel. Durch die doch recht groß gefeierte Veröffentlichung von Opera 9.5 konnte ich mich einem kleinen Test natürlich nicht verschließen.
Bestes Beispiel ist Google mit seinem Mail-Dienst 
In letzter Zeit nutze ich immer häufiger 
Der neue Firefox 3.0 bietet, genauso wie der Safari-Browser, die Möglichkeit mir Farbprofilen zu arbeiten. So kann man sich z.B. das AdobeRGB-Farprofil in den Browser laden, was dann die angezeigten Farben von Bildern und Grafiken der aufgerufenen Webseiten anpasst.
Ich hab mich mal mit dem Thema auseinander gesetzt, mehrere Blogs auf einem WebSpace-Account zu betreiben. Dazu gibt es verschiedene Ansätze, die natürlich alle ihre Vor- und Nachteile haben.
Bis zum 14. Juni 08 reicht ein Kommentar im Smashing-Magazine um 1 von 8 Büchern (in Englisch) zu gewinnen. Ein Wort oder auch Satz sowie die Buch-Nummer im Kommentar genügen, um am Gewinnspiel teilzunehmen. Ausgelost wird je Buchnummer per Zufallsgenerator am 15.06.08. Außerdem darf man sich natürlich nur für ein Buch entscheiden. Dabei fällt die Auswahl nicht ganz leicht, da es doch sehr interessante Werke zu verlosen gibt. Mit dabei sind folgende Bücher:
Über die 