Vererbung in Listen (UL, text-decoration)

[Kc]

Hallihallo,

Folgender Codeschnippsel bringt mich gerade zum erstaunen:

  
<ul>  
    <li style="text-decoration:underline;">  
        test1  
        <ul>  
            <li style="text-decoration:none;">  
                test2  
            </li>  
        </ul>  
    </li>  
</ul>  

Die intention ist einfach: In der ersten Ebene soll das Listenelement unterstrichen sein, in der zweiten Ebene nicht mehr. Seltsamerweise ist die text-decoration in der zweiten Ebene trotzdem vorhanden. Wer kann mir das erklären?
Gibt es einen anderen Weg den gewünschten Effekt mit purem CSS ohne zusätzliche HTML Elemente zu erreichen?

Viele Grüße,
  Kc

[Gunnar Bittersmann]

@@Kc:

Folgender Codeschnippsel bringt mich gerade zum erstaunen:

Mich auch. Trenne Struktur und Präsentation, i.e. verwende keine Inline-Styles!

Die intention ist einfach: In der ersten Ebene soll das Listenelement unterstrichen sein, in der zweiten Ebene nicht mehr. Seltsamerweise ist die text-decoration in der zweiten Ebene trotzdem vorhanden.

Works as designed.

Wer kann mir das erklären?

Die CSS-Spezifikation im Abschnitt 16.3.1: „Die Eigenschaft wird nicht vererbt, aber die abgeleiteten Boxen einer Block-Box sollten mit derselben Ausschmückung formatiert werden (z.B. sollten sie alle unterstrichen dargestellt sein).“

Gibt es einen anderen Weg den gewünschten Effekt mit purem CSS ohne zusätzliche HTML Elemente zu erreichen?

Nachfahrenselektor: li li

Live long and prosper,
Gunnar

[Kc]

Den Inline-style habe ich gewählt um das Beispiel kurz zu halten.
Aber wenn gewünscht eben nochmal in getrennter Form:

  
<style>  
    LI  
    {  
        text-decoration:underline;  
    }  
    LI LI  
    {  
        text-decoration:none;  
    }  
</style>  
  
<ul>  
    <li>  
        test1  
        <ul>  
            <li>  
                test2  
            </li>  
        </ul>  
    </li>  
</ul>  

Beispiel nach deinem Vorschlag, Gunnar. Interessanterweise funktioniert dieses Beispiel nun im IE7, aber nicht in FF2 oder Opera9.

Ich bin mir nicht sicher ob ich die Text-Passage, die du mir vorgelegt hast, richtig interpretiert habe:

"Wird die Eigenschaft für ein Element auf Blockebene angegeben, beeinflusst sie alle Ableitungen des Elements auf Inline-Ebene. Wird sie für ein Element auf Inline-Ebene angegeben (oder betrifft sie dieses), beeinflusst sie auch alle von dem Element erzeugten Boxen."

Heißt das, dass die Eigenschaft sich auf alle Inline-Elemente auswirkt, wenn sie für ein Blockelement (display:block) angegeben wurde und für Inline- und Block-Elemente, wenn sie für ein Inline-Element (display:inline) angegeben wurde?

Falls ich das richtig interpretiert habe, müsste meinem Verständnis nach

<style>
    UL
    {
        text-decoration:underline;
    }
    UL UL
    {
        text-decoration:none;
    }
</style>

den gewünschten Effekt bringen. Bringt aber den gleichen Effekt wie LI und LI LI auch: Im IE gehts, Opera und FF unterstreichen alles.

Gruß,
  Kc

[Gunnar Bittersmann]

@@Kc:

Beispiel nach deinem Vorschlag, Gunnar. Interessanterweise funktioniert dieses Beispiel nun im IE7

Der macht’s also mal wieder falsch.

aber nicht in FF2 oder Opera9.

Denkfehler meinerseits: ~~~css li li {text-decoration: none}

  
Sorge also dafür, dass die ungewollte Unterstreichung gar nicht erst entsteht:  
  
~~~html
<ul id="foo">  
    <li>  
        test1  
        <ul>  
            <li>  
                test2  
            </li>  
        </ul>  
    </li>  
</ul>

#foo>li {text-decoration: underline}

oder

<div id="bar">  
    <ul>  
        <li>  
            test1  
            <ul>  
                <li>  
                    test2  
                </li>  
            </ul>  
        </li>  
    </ul>  
</div>

#bar>ul>li {text-decoration: underline}

Für IEs, die den Kindselektor nicht kennen, kannst du ja deren o.g. Fehlverhalten ausnutzen.

Live long and prosper,
Gunnar

[Kc]

Klingt prinzipiell gut, nur: hast du deinen auch Vorschlag ausprobiert? Soweit ich das hier sehe, kommt man wieder aufs gleiche Ergebnis: FF+Opera unterstreichen beide Ebenen, IE zeigt natürlich nix (wegen Kind-Selektor).

[Gunnar Bittersmann]

@@Kc:

Klingt prinzipiell gut, nur: hast du deinen auch Vorschlag ausprobiert?

Grmpf.

Soweit ich das hier sehe, kommt man wieder aufs gleiche Ergebnis: FF+Opera unterstreichen beide Ebenen,

Ja, natürlich. Sie unterstreichen alles, was in äußeren 'li' liegt, also auch den Text in inneren 'li'. Ich sollte das Denken heute morgen sein lassen.

Fiele mir nur noch ein, den zu unterstreichenden Text in eigene Elemente ('span') zu setzen, was deinem ursprünglichen Wunsch „ohne zusätzliche HTML Elemente*“ widerspräche.

Ließe sich auch per JavaScript machen.

Live long and prosper,
Gunnar

* http://de.wikipedia.org/wiki/Deppenleerzeichen

[Kc]

Sieht ganz so aus :P
Najagut... was muss, das muss.
Trotzdem danke für die Mühe ;)

Gruß,
  Kc

[Gunnar Bittersmann]

@@Kc:

Sieht ganz so aus :P

Oder auch nicht.

Najagut... was muss, das muss.

Muss aber nicht. ;-)

Doch nochmal gedacht heute morgen:

li {text-decoration: underline}  
li ul {color: white /* bzw. was die Hintergrundfarbe ist */; text-decoration: underline}  
li li {color: black; text-decoration: none}

Live long and prosper,
Gunnar

[Kc]

Clever ;) Du hast jetzt natürlich nicht wirklich die Unterstreichung entfernt. Wenn der Hintergrund nicht einfarbig, sondern z.B. ein Hintergrundbild wäre, würds nicht funktionieren. Für meine Zwecke sollte es aber ausreichen. Thx