[XHTML/CSS] ul/li Kinder werden trotz untersagung unterstrichen *erledigt*

S

strolch00

redraft.de
ID: 155297
L
21 April 2006
1.684
72
Hi @ all,

hoffe der Titel trifft es halbwegs.
Folgendes Problem:
Ich habe eine verschachtelte Liste =>
HTML: 
                  <ul class="OStyle">
                    <li>einwas:
                      <ul>
                        <li>Irgendwas</li>
                      </ul>
                    </li>
                    <li>nocheinwas:
                      <ul>
                        <li>Irgendwas</li>
                      </ul>
                    </li>
und dazu diesen CSS Auschnitt =>
Code: 
div#main div#cont table.TTab ul.OStyle {
	list-style-type: none;
}
div#main div#cont table.TTab ul.OStyle li{
	font-weight: bold;
	text-decoration: underline;
	font-size: 1.1em;
}
div#main div#cont table.TTab ul.OStyle li ul li{
	font-weight: normal;
	text-decoration: none;
}

Kann mir einer verraten warum das li inerhalb von ul.OStyle li ul unterstrichen wird?
 
Zuletzt bearbeitet:
strolch00 schrieb:
Kann mir einer verraten warum das li inerhalb von ul.OStyle li ul unterstrichen wird?
Zum Vergrößern anklicken....
Weil es so im CSS steht ;)

Code: 
div#main div#cont table.TTab ul.OStyle li{
gilt auch für
Code: 
[COLOR=Red]div#main div#cont table.TTab ul.OStyle[/COLOR] li ul [COLOR=Red]li[/COLOR]{
Abhilfe schafft dieser Selektor: >
Damit sind nur direkt folgende Kinder gemeint:
Code: 
div#main div#cont table.TTab ul.OStyle > li
D.h. das <li> muss ein direktes Kind von <ul class="OStyle"> sein.
 
Hi theHacker,

also 1. hatte ich das auch schon getestet was aber nix gebracht hat, auch jetzt nochmal nach dem Test funktioniert es nicht.
2. dafür habe ich ja
Code: 
div#main div#cont table.TTab ul.OStyle li ul li{
	font-weight: normal;
	text-decoration: none;
}
danach nochmaldrin, weil dieser > Kind Selector nicht funktionierte. Und text-decoration: none; sollte dies doch wieder aufheben.
 
strolch00 schrieb:
Und text-decoration: none; sollte dies doch wieder aufheben.
Zum Vergrößern anklicken....
Gelten tun ja für den irgendwas-Abschnitt beide Regeln. Hier spekuliere ich nur, aber ich meine, dass Unterstrichen gegenüber nicht-Unterstrichen den Vorrang hat.

Probier mal aus, für die {... ul li ul li}-Regel !important zu setzen.
 
Also, ich hab das Problem jetzt soweit eingeschränkt, bis ich selber nimmer weiter weiß.

Das Beispiel mal vereinfacht:
Code: 
li {
  text-decoration: underline;
}
li li {
  text-decoration: overline;
[COLOR=Silver] /* erbt von li:
  text-decoration: underline; */[/COLOR]
}
li li erbt von li das underline-Flag, aber überschreibt es nicht, weil für text-decoration Mehrfachnennungen möglich sind. D.h. <li>...<li>-Elemente werden über- und unterstrichen.

Selbst ein none wird wie bei !important auch nur hinzugefügt, aber löscht das underline nicht.
 
theHacker schrieb:
Selbst ein none wird wie bei !important auch nur hinzugefügt, aber löscht das underline nicht.
Zum Vergrößern anklicken....

Ein text-decoration:none; sollte nicht "hinzugefügt" werden. Sonst könnte man keine Unterstreichung bei Links deaktivieren. Und das geht schließlich definitiv.

Ich bin jetzt aber zu müde um das Problem zu lokalisieren. Ich werden, wenn ich Zeit habe, mich im laufe des Tages einmal ransetzen.
 
Graccem schrieb:
Ein text-decoration:none; sollte nicht "hinzugefügt" werden. Sonst könnte man keine Unterstreichung bei Links deaktivieren. Und das geht schließlich definitiv.
Zum Vergrößern anklicken....
Lese ich daraus, dass du der Meinung bist, dass es eigentlich klappen sollte, wie strolch00 und ich denken ?
Try yourself, es geht eben nicht so :p
 
theHacker schrieb:
Lese ich daraus, dass du der Meinung bist, dass es eigentlich klappen sollte, wie strolch00 und ich denken ?
Try yourself, es geht eben nicht so :p
Zum Vergrößern anklicken....

Ja, nur leider wirkt text-decoration auch auf Kind-Elemente aus, wenn das Elternelement ein Blockelement ist.
https://www.w3.org/TR/REC-CSS2/text.html#q3

Also, was müssen wir machen? Dem LI den Blockstatus mit display:inline entziehen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="de">
	<head>
		<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
		<style type="text/css">
		<!--
		ul.OStyle { list-style-type: none; } 
		ul.OStyle li{ font-weight: bold; font-size: 1.1em;text-decoration: underline; display:inline; } 
		ul.OStyle li ul li{ font-weight: normal;text-decoration: none; }
		-->
		</style>
		<title>Test</title>
	</head>
	<body>
		<ul class="OStyle">
			<li>einwas:
				<ul>
					<li>Irgendwas</li>
				</ul>
			</li>
			<li>nocheinwas:
				<ul>
					<li>Irgendwas</li>
				</ul>
			</li>
		</ul>
		
	</body>
</html>

Alternativ geht auch, dass man im äußeren LI den Text mit einem SPAN umschließen und diesem SPAN dann das underline mitgibt.

HTH

edit: Opera 8.5 macht aber bei der ersten Variante nicht mit.
 
Zuletzt bearbeitet:
Das mit dem Inline habe ich schon probiert, das kann ich nicht verwenden. Aber das habe ich auch schon gelesen mit dem Blockstatus siehe oberen Link. Und wenn ich noch nen Span extra deklarieren muss kann uich auch gleich das <b> Tag nehmen so wie ich es nun habe. Oder siehst du da Schwierigkeiten mit dem <b> Tag?
 
Der B-Tag ist als veraltet eingestuft. Ich persönlich würde ihn daher nicht nutzen. Aber ansonsten spricht nichts gegen den B-Tag. Wobei ein bedeutungsloses SPAN mehr Sinn macht, meiner Meinung nach.
 
theHacker schrieb:
Wer sagt'dn das ? :hö:
https://de.selfhtml.org/html/text/physisch.htm#elemente

<u>, <strike> und <s> sind depricated, weil dass durch die CSS-Eigenschaft text-decoration abgedeckt werden soll, aber <b> und <i> sollen/dürfen/können doch weiter verwendet werden.
Zum Vergrößern anklicken....

Das W3C sagt das *g* Dinge, die als deprecated eingestuft werden, fliegen in den nächsten Versionen raus. Und in Hinblick auf die Entwicklung einer Webseite, würde ich das daher nicht mehr nutzen, da man sich so schon an die "neuen" Dinge gewöhnt. Aber verwenden darf man dieses Tags trotzdem.

tleilax schrieb:
Ich hab grad keine entsprechende Quelle gefunden, aber der Working Draft zu XHTML 2.0 enthält diese beiden Elemente schon nicht mehr. Statt <b> und <i> sind dann <strong> und <em> zu verwenden.
Zum Vergrößern anklicken....
Nicht ganz. Der B-Tag hat keine weitere semantische Bedeutung ausser dass er das Wort fett hervor hebt. Der STRONG-Tag hingegen steht für starke Betonung. Ein aurales Lesegerät reagiert also auf ein STRONG-Tag anders als auf ein B-Tag. Man kann sie daher nicht direkt vergleichen. Also sehr vorsichtig mit dem STRONG/EM-Tag umgehen.
 
:wall: mir ist ein Fehler unterlaufen ich meinte natürlich nicht das <b> Tag sondern das <u>. Und wenn das wirklich rausfliegt werde ich doch ein span nehmen. zumal der Validator rummotzt. Das es nicht definiert sei. :think: Also schein Graccem recht zu haben oder wie sehe ich das?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben