"text-decoration"-Beispiel. Wo ist das Problem?

[wax]

Hallöchen, ich muss mal wieder nerven .
Ich habe folgenden Code um drei einzelne Buchstaben entweder nicht unterstrichen oder aber unterstrichen anzuzeigen. Ich verstehe aber nicht wieso alles was nach dem "b" kommt auch unterstrichen wird, da die Style-Angabe im <span>-Element eigentlich etwas anderes angibt. Selbst wenn direkt vor dem "c" z.B. ein "text-decoration:none" gesetzt wurde, wird das "c" trotzdem unterstrichen angezeigt. Woran liegt das? Ich dachte bei CSS ist immer der Style, der zuletzt angegeben wurde aktiv.

Hier mal der Code:

[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]p [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]align[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="Left">[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text-decoration:none;font-weight:normal;font-style:normal;font-size:12pt">[/COLOR][/SIZE][SIZE=2]a[/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text-decoration:none;font-weight:normal;font-style:normal;font-size:12pt">[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text-decoration:underline;font-weight:normal;font-style:normal;font-size:12pt">[/COLOR][/SIZE][SIZE=2]b[/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text-decoration:none;font-weight:normal;font-style:normal;font-size:12pt">[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text-decoration:none;font-weight:normal;font-style:normal;font-size:12pt">[/COLOR][/SIZE][SIZE=2]c[/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]p[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]

Wenn ich das <span>-Element immer direkt nach dem Buchstaben wieder schließe, funktioniert es wunderbar. Aber muss es nicht auch so gehen wie ich es habe? Bei anderen Style-Angaben wie z.B. für italic oder bold funktioniert meine Technik. Nur bei underline wird, sobald einmal unterstrichen wurde, alles danach kommende auch unterstrichen.

MfG
wax

 

[Skater]

Ich schätze mal der Browser ist überfordert.
Nimm mal den 2ten und den 4ten <span> raus, und versuchs dann nochmal...

 

[Corvulus]

Du darfst meien ich ncith mehrere Zusatzangaben wie in deinem Fall <span> verschachteln. Habe soetwas ähnliches gestern ausprobiert, da musste ich erst eines schließen und dann erst ein neues aufmachen.

Grß Corvulus

 

[nichtsgeht]

Du darfst meien ich ncith mehrere Zusatzangaben wie in deinem Fall <span> verschachteln

SPAN ist ein Inline-Element, und darf weitere Inline-Elemente enthalten.
Verschachtellungen sind daher erlaubt.
Aber die Theorie und Praxis laufen hier auseinander. Was bei text-decoration nicht geht, funktioniert aber z.B. mit color:

<span style="color:#0000FF;">  a 
  <span style="color:#00FF00;">  b 
    <span style="color:#FF0000;">  c 
    </span> 
  </span> 
</span>

 

[Corvulus]

So in etwa meitne ich das ja. ;-)

Corvulus

 

[wax]

Es ist wirklich seltsam, da es mit "font-style" und anderen Styles z.B. auch klappt. Hmm da haben die Browser wohl ein kleines Problem oder ich erkenne meinen Denkfehler nicht. Die Sache mit dem Denkfehler ist wohl wahrscheinlicher ;)