nicht angemeldet
text-decoration kaskadiert nicht
-1 0 Eigene Logik für text-decoration?
1 
Gunnar Bittersmann
2
text-decoration kaskadiert nicht
Hallo allerseits.
Was ist da los?
<p style="color:red; text-decoration:underline; ">
Rot ist unterstrichener Text, aber<span style="color:blue; text-decoration:none;"> Blau nicht </span>und das hier ist wieder Rot.
</p>
Der Dreamweaver zeigt den blauen Text nicht unterstrichen, Netscape 4 auch, aber im IE, in Netscape 6 und im Firefox ist alles unterstrichen.
Hab ich da was nicht mitgekriegt?
Gruß
Martin
-
Das ist schon richtig so, wie der Firefox es macht. Wie du siehst, ist die Unterstreichung ja auch überall rot, selbst unter dem blauen Text. Es wird halt vom <p> erstmal alles unterstrichen gemacht, was drin ist. Ob da noch irgendwelche <span>s oder andere (Inline-)Elemente drin sind, ist völlig irrelevant. Du kannst das text-decoration:none vom span auch weglassen und erhälst das gleiche Ergebnis. Vererbt wird es eh nicht.
Willst du keine Unterstreichung haben, musst du sowas basteln:
<p style="color:red;">
<span style="text-decoration:underline;">Rot ist unterstrichener Text, aber</span>
<span style="color:blue;"> Blau nicht </span>
<span style="text-decoration:underline;">und das hier ist wieder Rot.</span>
</p>-
Dass man das Problem so umgehen kann, ist mir schon klar. Aber die Logik entzieht sich mir. Insbesondere im folgenden Beispiel:
---------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>text-decoration none</title>
<style type="text/css">
body{font-size:24px; color:red; text-decoration:underline;}
</style>
</head><body>
<p>Text</p>
<p style=" font-size:12px; color:blue; text-decoration:none;">Text</p>
</body>
</html>---------
Warum folgt text-decoration einer anderen Logik als alle anderen styles?
Vollends verwirrend finde ich das:
---------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>text-decoration none</title>
<style type="text/css">
body{font-size:24px; color:red; text-decoration:underline;}
</style>
</head><body>
<p>Text</p>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>Text</td>
</tr>
</table>
</body>
</html>----------
IE zeigt im strict-mode den Tabellentext groß, rot und unterstrichen.
(Anscheinend wird der body-selector voll auch auf td angewandt.)
Im qirks-mode klein, nicht unterstrichen, aber rot.FF zeigt im strict-mode den Tabellentext groß, rot und nicht unterstrichen.
(Hier wird der body-selector auf td angewandt mit Ausnahme von text-decoration?)
Im quirks-mode klein, rot und unterstrichen.Kann mir wer diese Logik erklären?
Gruß und Dank
Martin
-
Dass man das Problem so umgehen kann, ist mir schon klar. Aber die Logik entzieht sich mir. Insbesondere im folgenden Beispiel:
Warum folgt text-decoration einer anderen Logik als alle anderen styles?
Weil die anderen Styles (z.B. Farbe und Schriftgröße vererbt werden) text-decoration:underline wird nicht vererbt, z.B. genau wie border oder background.
Vielleicht hilft es dir vorzustellen, dass text-decoration:underline ähnlich ist wie border-bottom. Zwar ist die Darstellung etwas anders, aber von der Vererbung her ist es das gleiche. Die Darstellung in deinem Ursprungspost kann man damit jedenfalls gut erklären.
Vollends verwirrend finde ich das:
IE zeigt im strict-mode den Tabellentext groß, rot und unterstrichen.
(Anscheinend wird der body-selector voll auch auf td angewandt.)
Im qirks-mode klein, nicht unterstrichen, aber rot.Was der IE macht, hat überhaupt keine Aussagekraft. Der machst extrem viel falsch. Wenn du mehrere Browser vergleichen möchtest, nimm z.B. Opera und Mozilla oder Konqueror oder Safari...
FF zeigt im strict-mode den Tabellentext groß, rot und nicht unterstrichen.
(Hier wird der body-selector auf td angewandt mit Ausnahme von text-decoration?)Naja, die Farbe und Schriftgröße wird ja vom body geerbt. Das heißt nicht, dass der body-selector auf das td zutrifft, sondern dass sie auf das body zutrifft und auf alle nachvolgenden Elemente, die keine Schriftgröße selbst angegeben haben verrerbt wird. Wieso die Unterstreichung nicht im table ist, weiß ich nicht...
Im quirks-mode klein, rot und unterstrichen.
Im Quirksmode setzt der Firefox die Schriftgröße für <table>s auf den Standardwert zurück.
Ich sage nicht, dass der Firefox es in diesem speziellen Fall richtig macht. Operas Verhalten erscheint mir deutlich intuitiver, aber deine Testdokumente sind auch ziemlich merkwürdig. Wer gibt schon dem gesammten body ne Unterstreichung?
-
Moin!
Warum folgt text-decoration einer anderen Logik als alle anderen styles?
Ich würde behaupten, dass in den Beispielen zusätzlich noch diverse Browsereigenheiten ins Spiel kommen.
Aber zumindest die Unterstreichung ist eigentlich recht simpel zu erklären:
text-decoration:underline veranlaßt den Browser, unter die Schrift eine Linie zu zeichnen. text-decoration:none veranlaßt den Browser, keine Linie unter den Text zu zeichnen - eine dort eventuell befindliche aber auch nicht zu löschen.So ist jedenfalls die Definition von CSS.
Wenn man also einen Text hat, der unterstrichen ist, und darin einen Abschnitt, der nicht unterstrichen ist, dann wird die Unterstreichung nicht gelöscht - der nicht unterstrichene Text setzt nur einfach keine eigene Linie in seiner eigenen Farbe über die bereits bestehende Linie.
Das ist genauso, wie die Verschachtelung von <b> und <i>. Wenn ein Text komplett fett ist, und darin ist irgendwo ein Abschnitt kursiv, dann hört die Fettheit dort nicht auf, sondern wird zusätzlich mit Kursivschrift versehen. Ich weiß, dass das Beispiel hinkt, weil Schriftgewicht und Schriftstil zwei komplett unterschiedliche Eigenschaften in CSS sind, aber der optische Effekt ist derselbe. Also nicht vollkommen unbekannt.
Ich sage nicht, dass der Firefox es in diesem speziellen Fall richtig macht. Operas Verhalten erscheint mir deutlich intuitiver, aber deine Testdokumente sind auch ziemlich merkwürdig. Wer gibt schon dem gesammten body ne Unterstreichung?
Auch seltsame Testszenarien haben ordentlich, nämlich entsprechend der Spezifikation, dargestellt zu werden. Nichts anderes macht ja beispielsweise der ACID-Test, der vermutlich die seltsamste Ansammlung auch fehlerbehafteten Codes darstellt.
- Sven Rautenberg
--
My sssignature, my preciousssss!-
Das ist genauso, wie die Verschachtelung von <b> und <i>. Wenn ein Text komplett fett ist, und darin ist irgendwo ein Abschnitt kursiv, dann hört die Fettheit dort nicht auf, sondern wird zusätzlich mit Kursivschrift versehen. Ich weiß, dass das Beispiel hinkt [...]
Das Beispiel hinkt sogar sehr. Ein <b>abc <span style="font-weight:normal;color:red;">test</span> abc</b> wird ja eben nicht fett dargestellt, während ein <u>abc <span style="text-decoration:none;color:red;">test</span> abc</u> ja sehr wohl unterstrichen ist. Da finde ich meinen Vegleich mit dem border-bottom deutlich besser...
Auch seltsame Testszenarien haben ordentlich, nämlich entsprechend der Spezifikation, dargestellt zu werden. Nichts anderes macht ja beispielsweise der ACID-Test, der vermutlich die seltsamste Ansammlung auch fehlerbehafteten Codes darstellt.
Sicher, aber die Prioritäten der Browserhersteller sollten eher darin liegen, häufig anzutreffenden Code richtig darzustellen und erst zweitrangig solche total unsinnigen Fälle zu berücksichtigen. (Perfekt wäre natürlich, alles völlig korrekt darzustellen, aber das kann ja zur Zeit kein Browser, leider)
-
hi,
Das Beispiel hinkt sogar sehr. Ein <b>abc <span style="font-weight:normal;color:red;">test</span> abc</b> wird ja eben nicht fett dargestellt, während ein <u>abc <span style="text-decoration:none;color:red;">test</span> abc</u> ja sehr wohl unterstrichen ist.
Es bringt generell nichts, in diesem Falle Eigenschaften wie font-weight oder color mit text-decoration zu vergleichen.
In CSS ist text-decoration nun mal so definiert, und damit hat es sich eigentlich.
"The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the element."Da finde ich meinen Vegleich mit dem border-bottom deutlich besser...
Der Begriff der Vererbung ist dort trotzdem fehl am Platze.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Jedenfalls Dank an alle. Das Beispiel ist übrigens gar nicht so aus der Luft gegriffen und hat mit einer Web-Anwendung zu tun, in der die User die Möglichkeit haben, die styles für den <body> selbst zu bestimmen. Und da muss man auch das Unwahrscheinlichste in Betracht ziehen.
Gruß und Dank
Martin
-
-
Moin!
Das ist genauso, wie die Verschachtelung von <b> und <i>. Wenn ein Text komplett fett ist, und darin ist irgendwo ein Abschnitt kursiv, dann hört die Fettheit dort nicht auf, sondern wird zusätzlich mit Kursivschrift versehen. Ich weiß, dass das Beispiel hinkt [...]
Das Beispiel hinkt sogar sehr. Ein <b>abc <span style="font-weight:normal;color:red;">test</span> abc</b> wird ja eben nicht fett dargestellt, während ein <u>abc <span style="text-decoration:none;color:red;">test</span> abc</u> ja sehr wohl unterstrichen ist.
Man muß nur die Randbedingungen passend wählen: Wie kriegst du OHNE CSS nur mit HTML innerhalb eines Bereiches von <b> einen <i>-kursiven, nicht fetten Text hin?
Antwort: Gar nicht. Du mußt die Bereiche genauso aufteilen, wie bei text-decoration auch.
- Sven Rautenberg
--
My sssignature, my preciousssss!-
Man muß nur die Randbedingungen passend wählen: Wie kriegst du OHNE CSS nur mit HTML innerhalb eines Bereiches von <b> einen <i>-kursiven, nicht fetten Text hin?
Antwort: Gar nicht. Du mußt die Bereiche genauso aufteilen, wie bei text-decoration auch.
Wenn ich fies wäre, würde ich folgendes Vorschlagen:
<html>
<head>
<title>test</title>
</head>
<body>
<b>Das ist Fett <table><tr><td><i>Das nicht</i></td></tr></table> Das ist auch Fett</b>
</html>Jonathan
-
hi,
Wenn ich fies wäre, würde ich folgendes Vorschlagen:
<b>Das ist Fett <table><tr><td><i>Das nicht</i></td></tr></table> Das ist auch Fett</b>
Aber so fies, dass du aus invalidem Beispielcode Schlüsse _irgendeiner Art_ ziehen wollen würdest, bist du doch hoffentlich nicht.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi,
Wenn ich fies wäre, würde ich folgendes Vorschlagen:
<b>Das ist Fett <table><tr><td><i>Das nicht</i></td></tr></table> Das ist auch Fett</b>
Aber so fies, dass du aus invalidem Beispielcode Schlüsse _irgendeiner Art_ ziehen wollen würdest, bist du doch hoffentlich nicht.
Ich hab ja nur gesagt, "wenn ich fies wäre". Ich bin ja nicht fies. ;)
Ein valides Beispiel wäre, wenn ich statt dem <b> ein <div style="display:inline;text-decoration:bold"> nehmen würde (und das fehlende </body> ergänzen würde). Das käme von der Darstellung durch CSS-Fähige Browser her aufs selbe raus, allerdings durfte ich ja kein CSS verwenden...
-
text-decoration:bold
arg, ich meine natürlich font-weight:bold
-
-
-
-
-
-
-
-
-
-
Hello out there!
Hab ich da was nicht mitgekriegt?
Ja. [CSS2 §16.3.1]
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) -
hi,
<p style="color:red; text-decoration:underline; ">
Rot ist unterstrichener Text, aber<span style="color:blue; text-decoration:none;"> Blau nicht </span>und das hier ist wieder Rot.
</p>Du hast einen Schuhkarton (p), dieser hat einen Boden (text-decoration:underline).
Jetzt stellst du das Pappröllchen (span) einer aufgebrauchten Rolle Klopapier aufrecht in diesen Schuhkarton - dieses Röllchen hat natürlich keinen Boden (text-decoration:none).Aber nimmst du jetzt wirklich ernsthaft an, dass dadurch an der Stelle, auf der das Röllchen steht, auch der Boden des Schuhkartons sich auflöst ...?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hm, wenn CSS die magische Eigenschaft hat, den Schuhkarton da, wo das Pappröllchen steht, von rot auf blau umzufärben, dann könnte es doch die ebenso magische Eigenschaft haben, da, wo das Röllchen steht, ein Loch rauszustanzen.
Wenn das W3-Konsortium es so hätte haben wollen, dann täte CSS das (oder auch nicht oder nicht in jedem Browser oder nur im Firefox). Das W3-Konsortium wollte es nicht so haben, also tut CSS das nicht. Warum es das W3-Konsortium so haben wollte, wie es nun ist, hat es uns nicht verraten und ich kann's nicht ganz verstehen. Lassen wir es dabei bewenden.-
Warum es das W3-Konsortium so haben wollte, wie es nun ist, hat es uns nicht verraten und ich kann's nicht ganz verstehen. Lassen wir es dabei bewenden.
Nehmen wir mal folgendes Beispiel (bitte im Firefox angucken):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<p style="text-decoration:underline;">Das ist ein toller <sup>Test</sup> mit einer tollen Unterstreichung</p>
</body>
</html>Wie du siehst, geht die Unterstreichung unter dem ganzen Text hindurch, ihr ist es völlig egal, dass der Text hochgestellt ist.
Nehmen wir jetzt folgendes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<p style="text-decoration:underline;">Das ist ein toller <sup style="text-decoration:underline;">Test</sup> mit einer tollen Unterstreichung</p>
</body>
</html>Hier hat der hochgestellte Text eine Extra-Unterstreichung, wie auch angegeben.
Was du jetzt mit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<p style="text-decoration:underline;">Das ist ein toller <sup style="text-decoration:none;">Test</sup> mit einer tollen Unterstreichung</p>
</body>
</html>aussagst, ist nur, dass der hochgestellte Text keine eigene Unterstreichung haben soll. Aber die hat er ja eh nicht (standardmäßig). Also ist alles wie im ersten Beispiel.
(Das das Beispiel nicht im Quirksmodus und nicht in andren Browser klappt ist mir durchaus bewusst. Ich halte die Darstellung vom Firefox im Strict-Mode für die richtige, jedenfalls lässt sich an dieser das Verhalten am besten Demonstrieren)
-
hi,
Hm, wenn CSS die magische Eigenschaft hat, den Schuhkarton da, wo das Pappröllchen steht, von rot auf blau umzufärben,
Hat es aber nicht.
Siehe bereits verlinkte Definition von text-decoration:
"The color(s) required for the text decoration must be derived from the 'color' property value of the element on which 'text-decoration' is set. The color of decorations should remain the same even if descendant elements have different 'color' values."
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-