Die Probleme des IE6 erlauben fast schon die Namensgebung: "Professor Kompatibilität", aber weil das viel zu lang und medienunwirksam ist, hier einfach die Lösung für ein bekanntes Problem mit Hintergrundbildern im IE6.
Gerade bei grafisch etwas hochwertigeren Navigationen verwendet man gerne Hintergrundbilder innerhalb der Links um so mehr Möglichkeiten im Design auszuschöpfen.
Meistens hat ein Link ein normales Hintergrundbild und ein weiteres, wenn die Maus darüber fährt. Der Quellcode dafür könnte im CSS folgendermaßen aussehen:
a {
background:url(images/navigation.gif) repeat-x;
}
Rein theoretisch sollte jetzt bei dem Link ein Hintergrundbild erscheinen und sobald man mit der Maus darüber geht ein Anderes. Rein praktisch funktioniert dies jedoch nur im IE7 und Firefox korrekt. Der IE6 hat ein Caching Problem. Und zwar wird das Bild bei Hover jedes mal neu geladen, was zu einer Verzögerung in der Anzeige führt. Das ist ein bekanntes Problem, jedoch gibt es kein JavaScript-Hack das dort Abhilfe schafft.
Die Lösung
Anstatt zwei Bilder zu verwenden, die nach einander geladen und angezeigt werden, benutzen wir einfach nur ein Bild, dass beide Zustände beinhaltet. Das eine Bild sieht dann z.B. so aus:
Über die Background-Position können wir jetzt dem Hintergrund sagen, welcher Teil des Bildes angezeigt werden soll.
Wir tun mal so, als wäre das Bild 50 Pixel hoch. Die oberen 25 Pixel gehören zum Ausgangs-Zustand (der normale Link), die unteren 25 Pixel zum Hover-Effekt. Über folgende Definition in CSS können wir das dann definieren:
a {
background:url(images/navigation.gif) no-repeat 0 0;
}
a:hover {
background-position: 0 -25px;
}
In diesem Fall wird das Hintergrundbild um 25 Pixel nach oben verschoben, wenn die Maus über den Link fährt. Damit verschwindet der rote Teil aus dem sichtbaren Bereich und die weiße Fläche kommt zum Vorschein. So hat man den gleichen Effekt, als würde man ein anderes Bild hinein laden.
Diese Vorgehensweise wird im Übrigen empfohlen, unabhängig vom Browser, da keine Bilder per CSS nachgeladen werden müssen, was bei langsamen Geschwindigkeiten zu nicht unerheblichen Verzögerungen führen kann.
Damit Google übrigens etwas zu crawlen hat, bietet es sich an innerhalb des Links den Text aus dem Bild hinein zu schreiben und dann mit text-indent:-900em; zu versehen. So ist kein Text sichtbar, aber dennoch vorhanden. Viele auf Bildern basierende Navigationen werden so erstellt - und es hat sich bewährt.
Kommentare (6)
