Webseiten-Infos.de

PNG-Logo auch für den IE 6

In meinem Blogbeitrag “Das neue Logo ist da!” hatte ich darauf hingewiesen, dass das Logo beim Internet Explorer (IE) bis zur Version 6 mittels display: none ausgeblendet wird.

Grund: Das Logo ist für einen schönen fließenden Farbverlauf und gleichzeitig Alpha-Transparenz des Hintergrunds im PNG 32-Format abgespeichert. Beim Internet Explorer 6 (IE6) und kleiner führt das aber zu Darstellungsproblemen (hier: schwarzer Hintergrund).

Nun dachte ich mir, wenn ich in einem bedingten Kommentar (Conditional Comment) die CSS-Regel  schreibe, dann kann ich da stattdessen auch ein JavaScript reinpacken, das dem Internet Explorer (IE) die Alpha-Transparenz des Hintergrunds beim Logo beibringt.

Folgende JavaScripte testete ich in diesem Zusammenhang:

1. Supersleight
   Funktionierte zwar, aber führte dazu, dass die Tab-Navigation völlig verschoben wurde.
2. PNGfix
   Funktionierte auf Webseiten-Infos.de irgendwie nicht richtig. Der Hintergrund des Logos blieb grau und der Rahmen der Brotkrümelnavigation (breadcrumb navigation) wurde verschoben.
3. Unit PNG Fix
   Funktioniert immerhin im Internet Explorer 6 (IE6) einwandfrei und anscheinend ohne Nebenwirkung.
   Beim Internet Explorer 5.5 und 5.0 (IE 5.5 und 5.0) wird dagegen der Hintergrund des Logos grau dargestellt.

Gleichwohl habe ich Unit PNG Fix als Ersatz für display: none eingebaut, denn nur noch knapp über 1% der Besucher von Webseiten-Infos.de benutzten den Internet Explorer 5.5 oder 5.0 (IE 5.5 oder 5.0). Tendenz erfreulicherweise weiter fallend.

Das JavaScript Unit PNG Fix habe ich wie folgt in den Kopfbereich (Header) der Webseiten eingebunden (Auszug des relevanten Codes):

Und den Pfad für die dafür erforderliche Grafik clear.gif habe ich im JavaScript entsprechend angepasst.

Sofern Nutzer des Internet Explorers 6 (IE6) JavaScript deaktivieren, funktioniert die Alpha-Transparenz natürlich nicht und sehen sie ebenfalls einen grauen Hintergrund beim Logo.

Solltest Du Nebenwirkungen feststellen, wäre ich für einen entsprechenden Hinweis dankbar.