dciwam.de / faq / nn4 / n4-border-probleme

Netscape 4.5 ignoriert style="border: 0"

Netscape 4.5 ignoriert offensichtlich style="border: 0" für das img-Element wie z.B. bei:

<p>
<a href="http://jigsaw.w3.org/css-validator">
<img style="border: 0; width: 88px; height: 31px"
     src="http://jigsaw.w3.org/css-validator/images/vcss.gif"
     alt="Valid CSS!">
</a>
</p>

border wird dort entgegen der CSS-Anweisung angezeigt, Internet Explorer interpretiert es aber korrekt.

Kann man dieses Problem mit CSS irgendwie lösen? Grundsätzlich hat NN4+ grosse Probleme, irgendwelche Style-Regeln auf das IMG-Element anzuwenden. So stellt dieser Browser auch den Rand von IMG trotz der Angabe 'border: 0' dar, was richtig lästig ist.

Björn Höhrmann macht unter http://css.nu/pointers/border-suppress.html einen Vorschlag, wie man die Umrandung eines Bildes innerhalb eines Ankers auch für NN4+ mit CSS zumindest unsichtbar machen kann.

body {
    background: silver;
    color: black;
    }

a img {
    color: silver;
    background: silver;
    /*the color should be identical to the background
    color of the parent*/
    border: 0;
    }

Der "Trick" bei diesem Vorschlag ist, dass die Zeichenfarbe (color) des img-Elements innerhalb des a-Elements die gleiche Farbe wie die Hintergrundfarbe des übergeordneten Elements (im Beispiel body) hat. Der Rahmen wird zwar immer noch gezeichnet, aber er ist wegen identischer Farben nicht sichtbar.

Wenn man diesen Trick einsetzt, sollte man es vermeiden, auf das Bild innerhalb des selben Ankers noch Text folgen zu lassen und lieber <a href="..." ...> für den Text ein zweitesmal setzen, da einige ältere Browser fälschlicherweise sonst auch den auf das Bild folgenden Text in der Hintergrundfarbe darstellen.

Kommentar von Michael Nahrath dazu:

Dieser "dirty Trick" ermöglicht es, auch bei der Verwendung von 'HTML 4 strict', mit dem fehlerhaften NN4+ einen bestimmten visuellen Effekt zu erreichen. Ob sich das lohnt, ist eine andere Frage.

Bevor ich zu solchen unschönen CSS-Workarrounds greife, lasse ich lieber den NN4+ Ränder anzeigen. Oder ich bleibe ehrlich bei 'HTML 4 transitional' und setze <IMG border="0" ...> (genau für Grafikbrowser mit unvollständiger CSS-Unterstützung wurde 'HTML 4 transitional' schliesslich entwickelt).

Bitte überlegt Euch gut, ob es für Eure Seite nötig und sinnvoll ist, die 'Bilderrahmen' für Grafiklinks zu unterdrücken! Genauso wie die Unterstreichung von Links dienen sie der Orientierung eurer Besucher. Wenn ihr sie wegnehmt, macht Ihr Euren Besuchern die Navigation ein bisschen schwerer.

Kommentar von Helmut Chang dazu:

Nicht unerwähnt bleiben sollte, dass bei obigem Beispiel eine Reihe von Browsern im Falle, dass die Grafik nicht angezeigt werden kann, den Alternativtext (alt="...") in der Farbe 'silver' auf Hintergrund 'silver' darstellen. Somit wäre der Link unbrauchbar.

Deshalb würde ich empfehlen (sollte man auf der Strict-DTD bestehen), die Hintergrundfarbe für 'a img' auf einen Kontrastwert zu setzen. Dadurch würde der Alternativtext bei abgeschalteten Grafiken trotzdem lesbar sein. Wird die Grafik jedoch angezeigt, ist diese Hintergrundfarbe nicht sichtbar, da vom Bild überdeckt.

Eine Ausnahme bilden Grafiken im .gif- oder .png-Format, bei denen eine Transparenz festgelegt wurde. Hier sieht man die konträre, für 'a img' gesetzte Hintergrundfarbe sehr wohl.

Allgemein kann ich mich deshalb nur Michael Nahrath's Meinung anschliessen, die Transitional-DTD zu verwenden, bevor ich mir unzählige Workarounds ausdenke um Browser wie NN4 auszutricksen.

Michael Herbst • http://www.ventora.de/
Helmut Chang

Zum Seitenanfang

URL: http://dciwam.de | Letzte Änderung: 21.05.2009 | G. Schneider | Kontakt