text-decoration:none unter text-decoration:underline

[KayKay]

Hallo,

simple Frage. Warum wird der zweite SPAN bei folgendem Beispiel trotzdem unterstrichen dargestellt?

  
<div style="text-decoration:underline">  
	<span>Test 1</span>  
	<span style="text-decoration:none">Test 2</span>  
</div>  

Danke für die Erklärung & Viele Grüße,
KayKay

PS: Für all die Schlaumeier... mir ist klar das ich bei dem Beispiel das "korrekte" Resultat auch mit <span style="text-decoration:underline">Test 1</span><span>Test 2</span> erhalten würde...

[Kai345]

[latex]Mae  govannen![/latex]

simple Frage. Warum wird der zweite SPAN bei folgendem Beispiel trotzdem unterstrichen dargestellt?

Weil eine nicht vorhandene (= nicht gezeichnete) Linie von Span 2 die Linie des Elternelements nicht überdecken kann.

Cü,

Kai

[KayKay]

Weil eine nicht vorhandene (= nicht gezeichnete) Linie von Span 2 die Linie des Elternelements nicht überdecken kann.

Danke schön! Guter Gedanke. Ideen für einen "work-around"?

[KayKay]

Danke schön! Guter Gedanke. Ideen für einen "work-around"?

border-bottom:1px solid #BGCOLOR hats bei mir getan!
Ist sowas Browserkompatibel?

[Kai345]

[latex]Mae  govannen![/latex]

Weil eine nicht vorhandene (= nicht gezeichnete) Linie von Span 2 die Linie des Elternelements nicht überdecken kann.
Danke schön! Guter Gedanke. Ideen für einen "work-around"?

Bei inline-Elementen wie span würde ich mit border-bottom arbeiten:

<div class="line">  
   <span>Test 1</span>  
   <span class="noline">Test 2</span>  
   <span>Test 3</span>  
</div>

div.line * {  
	border-bottom: 1px solid blue;  
}  
div .noline {  
	border-bottom: none;  
}

Bei block-Elementen geht das (so) nicht, weil die standardmäßig die gesamte Breite des Elternelements haben, also entweder auf inline setzen oder eine Breite angeben (was bei Text wiederum eher probklematisch ist, weil die tatsächliche Breite unbekannt ist

Cü,

Kai

[Gunnar Bittersmann]

@@KayKay:

nuqneH

Ideen für einen "work-around"?

div[style="text-decoration:underline"], div[style="text-decoration:underline"] span[style="text-decoration:none"]  
{  
  text-decoration: none;  
}  
  
div[style="text-decoration:underline"] span  
{  
  text-decoration: underline;  
}

Ein wahrhafter Würgaround. ;-)

Qapla'

PS: Das Würgen setzt bereits bei Inline-Style-Angaben ein.

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Ein wahrhafter Würgaround. ;-)

Der zudem nur in UAs funktioniert, die CSS gemäß Spec 2.0 interpretieren, nicht gemäß Spec 2.1. [CSS21 §C.2.31] Solche UAs gibt es wohl nicht.

Qapla'