image replacement - Lösung für css an, Bilder aus?

[apsel]

Om nah hoo pez nyeetz,

In einem Artikel auf meiert.com sind verschiedene Varianten zu image-replacement vorgestellt. Als Problem wird immer genannt: "CSS an, Bilder aus". Das leuchtet auch ein.

Ich denke, eine Lösung gefunden zu haben, die unter http://selfhtml.apsel-mv.de/menu/menu.html begutachtet werden kann. Es ist bisher noch nicht aufgehübscht und für eine Navigationsliste gedacht, sollte aber für alle Elemente funktionieren.

Grundidee: Die Grafik wird einmal als Hintergrund des Elementes definiert und einmal kommt sie als img-Element in den Quelltext. Sodann wird der Text des Elementes mit text-indent weit nach links geschoben und das Bild mit margin-left weit nach rechts. Das hat folgende Wirkungen:

#1# css an, bilder an: Die Hintergründe werden wie gewünscht angezeigt, der Text befindet sich weit links und die Grafik weit rechts.

#2# css an, bilder aus: Der Text befindet sich weit links, die Grafik wird jetzt vom Text aus zurückgeschoben und die alt-Texte befinden sich im Anzeigebereich. Das Menu ist bedienbar.

#3# css aus: Das Menu ist bedienbar.

positiv getestet in FF3.6, Opera10.51, IE8 als IE8, IE 8 als IE7

keine Funktion in Safari4.0.4, Chrome4.

die beiden letztgenannten scheinen das Nicht-Darstellen der Grafiken anders umzusetzen als die anderen.

Was meint ihr dazu?

Matthias