Bilder sollen in Links nicht unterstrichen werden (Mozilla 1.3b)

[Robert Bamler]

Hallo ihr CSS-Profis,

wenn ich folgendes CSS notiere:

span.a{font-weight:bold;text-decoration:underline}
span.b{font-weight:normal;text-decoration:none}

Dann wird dieses Zeile:

<span class="a">Text1 <span class="b">Text2</span> Text3</span>

Wie folgt dargestellt:

• Text1 und Text3 werden wie erwünscht sowohl fett als auch unterstrichen dargestellt.
• Text2 wird zwar nicht fett, trotzdem aber unterstrichen dargestellt.

Wie kann ich erreichen, dass in einem Element, das sich innerhalb eines anderen Elements mit "text-decoration:underline" befindet, der Text nicht unterstrichen dargestellt wird? Ich möchte also sozusagen die Unterstreichung für Text2 vorübergehend aufheben. Ich habe bereits in http://www.w3.org/TR/REC-CSS2/text.html#q3 nachgelesen, dass in einem als unterstrichen ausgezeichneten Element alle Kindelemente auch unterstrichen werden sollen. Gibt es trotzdem eine Möglichkeit, das zu umgehen?

Wenn ich in der zweiten Zeile statt "text-decoration:none" folgendes: "text-decoration:overline" angebe, wird Text2 übrigens sowohl über-, als auch unterstrichen.

Wozu ich das brauche:

Mozilla 1.3b unterstreicht in Hyperlinks auch Bilder (<img ... />), wenn man einen Doctype angibt und der Hyperlink neben dem Bild auch Text enthält. Ich möchte aber, dass nur der Text unterstrichen wird, nicht das Bild im Hyperlink. Dazu habe ich schon folgendes Versucht:

a {text-decoration:underline}
a img {text-decoration:none}

(Statt mit "a" habe ich es auch mit "a:link" getestet und außerdem die Zeilen vertauscht.)

Aber das nützt ja nichts (weder in der Praxis, noch laut der W3C-Spezifikation). Gibt es trotzdem eine Möglichkeit, dass Mozilla 1.3b die Bilder in meinen Hyperlinks nicht unterstreicht? Die unterstrichenen Bilder machen die Seite IMHO sehr unübersichtlich, weil dadurch zusammengehörige Ordnerbäume "auseinandergeschnitten" werden.

Danke schon einmal, dass ihr bis hierhin durchgehalten habt ;-)

Robert

[Fabian Transchel]

Hi Robert,

Wie kann ich erreichen, dass in einem Element, das sich innerhalb eines anderen Elements mit "text-decoration:underline" befindet, der Text nicht unterstrichen dargestellt wird? Ich möchte also sozusagen die Unterstreichung für Text2 vorübergehend aufheben. Ich habe bereits in http://www.w3.org/TR/REC-CSS2/text.html#q3 nachgelesen, dass in einem als unterstrichen ausgezeichneten Element alle Kindelemente auch unterstrichen werden sollen. Gibt es trotzdem eine Möglichkeit, das zu umgehen?

Deine Ausführungen sind korrekt, das machen alle Browser, die CSS1 einigermaßen gut können, auf diese Weise.

Ich habe einiges ausprobiert, und bin auch gescheitert, vielleicht zaubert Orlando ja noch was ;-)
Ich habe es jetzt so gelöst:

span.a{font-weight:bold; text-decoration:none;}
span.b{font-weight:normal; text-decoration:none;}
span.c{font-weight:bold; text-decoration:underline;}

<span class="a"><span class="c">Text1</span><span class="b">Text2</span><span class="c">Text3</span></span>

Nicht schön, aber selten ;-)

Grüße, Fabian

[Robert Bamler]

Hallo Fabian,

auch dir danke für deine Antwort.

Ich habe es jetzt so gelöst:

span.a{font-weight:bold; text-decoration:none;}
span.b{font-weight:normal; text-decoration:none;}
span.c{font-weight:bold; text-decoration:underline;}

<span class="a"><span class="c">Text1</span><span class="b">Text2</span><span class="c">Text3</span></span>

Ja, das geht natürlich in diesem Fall schon. Aber bei mir handelt es sich ja um Hyperlinks. Das äußerste span-Element ist dort wo ich das ganze anwenden möchte also ein a-Element. Und für a-Elemente kann ich nicht generell angeben, dass sie nicht unterstrichen werden sollen, da ja alle anderen Links auf der Seite schon unterstrichen sein sollen. Und bei jedem Link noch ein extra-Tag zum Unterstreichen 'reinzuquetschen ist ja auch nicht der Sinn der Sache. Ich könnte mir höchstens folgende "Notlösung" vorstellen:

a {text-decoration:underline}
a.bildlink{text-decoration:none}
span.unterstrichen{text-decoration:underline}

<a href="adresse.htm" class="bildlink"><img src="bild.gif" border="0" alt="bild" /><span class="unterstrichen">Link mit Bild</span></a><br />

<a href="adresse.htm">Normaler Link</a>

Aber ganz zufrieden bin ich damit ehrlichgesagt nicht. Zerteilen möchte ich die Links auch nicht, da ich einen hover-Effekt definiert habe.

Weißt du einen Rat?

Robert

[Axel Richter]

Hallo,

eine absolute Lösung habe ich auch nicht. Aber so:

a {text-decoration:none;}
a span {text-decoration:underline;}

<a href="adresse.htm"<img src="bild.gif" border="0" alt="bild" /><span>Link mit Bild</span></a>

<a href="adresse.htm"><span>Normaler Link</span></a>

brauchst Du weniger Klassen.

viele Grüße

Axel

[Kai Lahmann]

hi

Gibt es trotzdem eine Möglichkeit, das zu umgehen?

nein.

Mozilla 1.3b unterstreicht in Hyperlinks auch Bilder (<img ... />), wenn man einen Doctype angibt und der Hyperlink neben dem Bild auch Text enthält.

das klingt nach einem Bug, denn Bilder sind nie zu unterstreichen.. Beispiel-URL?

Grüße aus Bleckede

Kai

[Robert Bamler]

Hallo Kai,

danke für deine schnelle Antwort.

Beispiel-URL?

Auf http://www.bamler.de/robert/selfforum/mozillatest/index.htm kannst du dir das anschauen. Dort ist auch ein Screenshot, wie es bei mir aussieht. Die Bilder werden nur in Mozilla 1.3b unterstrichen, andere Browser (auch Mozilla 1.2.1) unterstreichen sie nicht.

Grüße aus Bleckede

Danke und Grüße aus Gilching (kennt nur keiner).

Robert

[Kai Lahmann]

hi

Auf http://www.bamler.de/robert/selfforum/mozillatest/index.htm kannst du dir das anschauen. Dort ist auch ein Screenshot, wie es bei mir aussieht. Die Bilder werden nur in Mozilla 1.3b unterstrichen, andere Browser (auch Mozilla 1.2.1) unterstreichen sie nicht.

bei mir auch *den zustängigen auf's Dach steig*

Grüße aus Bleckede

Kai