Früher war vieles besser: Beim Umsetzen eines Layouts in (X)HTML verzichteten Web-Entwickler und Designer, soweit es nur ging, auf den Einsatz von transparenten Grafiken im PNG-Format und nahmen somit die Einschränkungen bei der Gestaltung einer Webseite in Kauf. Der Verantwortliche für diesen Ausnahmezustand war sich keiner Schuld bewusst. Internet Explorer 6 und seine in der Versionsnummer jüngeren Brüder konnten und können bis dato keine transparenten PNGs fehlerfrei verarbeiten und darstellen.
Die augenblickliche Welt sieht ganz anders aus. Die modernen Browser, darunter auch der Platzhirsch Internet Explorer 7, sind in der Lage komplexe Layouts verbindlich darzustellen, auch wenn PNG-Bilder zum Bestandteil des entworfenen Designs werden. Auf dieser Grundlage entfaltet sich die Kreativität, gestalterische Freiheit nimmt ihren Lauf – elegante Designumsetzungen sind die blumigen Folgen.
Leider sind die älteren Versionen des Internet Explorer unter den Nicht-Power-Nutzern noch stark verbreitet und lassen so ungewollt stilvolle Webseiten „alt“ aussehen. Nur wegen der PNG-Grafiken mit einem Transparenzfaktor, die auf der Seite ihre Verwendung finden. Höchste Zeit also über einen effektiven Workaround für alle IE-Versionen kleiner 7 nachzudenken.
Dr. Web Logo als transparentes PNG im IE 6
Als Lösung kursieren im Internet unterschiedliche Ansätze, die mehr oder weniger wirkungsvoll und unterschiedlich schwer zu implementieren sind. Die einfachste Methode ist der Gebrauch einer sogenannten HTC-Datei, die im Inneren über einen leicht verständlichen JavaScript-Code verfügt und bei Verarbeitung mit Microsoft-internen Filterfunktionen hantiert. Die besagte Datei trägt einen vielversprechenden Namen iepngfix.htc und wird per Copy&Paste aus dem ZIP-Archiv entnommen, welches auf der Download-Seite des Fix-Entwicklers Angus Turnbull zur Verfügung steht. Somit wäre die erste und die schwierigste Maßnahme von insgesamt zwei abgehackt.
Im zweiten Schritt muss lediglich eine entsprechende CSS-Definition – alternativ inline im (X)HTML-Code oder im externen CSS-File – festgelegt werden, welche den nicht ganz zeitgemäßen Browser dazu bewegt, die im Hauptverzeichnis des Projektes abgelegte HTC-Datei bei der Formatierung zu berücksichtigen und anzuwenden. Und das geschieht nach folgendem simplen Muster:
PNG-Fix auf alle Elemente anwenden
{
behavior: url(iepngfix.htc);
}
PNG-Fix nur auf Inline- und im Div vorhandene Hintergrundgrafiken anwenden
img, div {
behavior: url(iepngfix.htc);
}
Wahlweise kann der Fix-Aufruf auch direkt in CSS-Klassen notiert werden und muss nicht unbedingt für alle grafische Objekte geltend gemacht werden (wie im letzten Code-Beispiel vorgeschlagen). Prima klappt die offerierte Lösung auch mit transparenten PNG-Bildern, die per StyleSheet als Hintergrund eines Bereichs deklariert sind. Doch Vorsicht: Soll diese Hintergrundgrafik mittels repeat-Eigenschaft vertikal und/oder horizontal wiederholt werden, so kommt es gar nicht zum gewünschten Effekt und das Bild erscheint nur ein einziges Mal. Bedauerlicherweise ein unschöner Nebeneffekt des Fixes.
Gleiches Logo mit eingespieltem PNG-Fix für IE 6
Unterm Schlussstrich ist der besprochene Ansatz eine simple Lösung, das anspruchsvolle Layout mit Alpha-PNGs auch auf älteren IE-Versionen schick (und durchsichtig) aussehen zu lassen. ™
Erstveröffentlichung am 10.09.2007
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
Danke sehr
läuft 1A 
Das “blank.gif” findet im Text keine Beachtung, ist aber wichtig, weil sonst über einer PNG (keine HG Grafik!) ein Platzhalter eingeblendet wird.
Wie Frank Burek zuvor schon schrieb, wird bei mir im IE 6 das Symbol für eine fehlende Grafik angezeigt (rotes Kreuz). Außerdem wird ein Rahmen drumherum gelegt, den ich weder mit boder=”0″ im HTML-Code (direkt im img-Tag) noch in der Styles-Datei (an den verschiedensten Stellen) weg bekomme. Gibt es dafür eine Erklärung oder ein Work around?
Hab das png alternativ nun als Hintergrundgrafik in einem div positioniert, wo es nun korrekt angezeigt wird.
Werde mir diesen Lösungsansatz jedenfalls gut merken.
Bei mir hatte es wunderbar geklappt … danke!
Bei mir auch!
Kleine Korrektur:
Background Grafiken können mithlife des beigelegten Javascripts “repeated” und ausgerichtet werden.
Leider kann ich mit dieser Lösung meine Bilder nicht mehr auf 100% Höhe skalieren. Oder weiß das jemand eine Lösung für.
Verzichte auf die Datei und nehme CSS oder ein JS-Skript.
CSS gibt es hier und ist schon seit ewigen Zeiten bekannt:
#layer {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’bild.png’, sizingMethod=’scale’);
background:none;
}
Vorsicht: Vadilierung streikt. Deshalb besser eine Extra Datei für den IE (ausgelagert), wenn möglich. Letzteres, weil problematisch beim Einsatz eines CMS. Da würde ich dann zum Skript greifen oder leider völlig auf transparente Grafiken verzichten.