IE, Listenelemente und Border

[AllesMeins]

Hiho,

ich stehe vor einem kleinen Problem. Und zwar verhält sich der IE mal wieder ziemlich kontraintuitiv, um es freundlich auszudrücken. Also folgender HTML Code:

<ul class="sitemap">
<li>INHALT</li>
<li><INHALT</li>
<ul class="sitemap_sub">
<li>INHALT</li>
<li>INHALT</li>
<li>INHALT</li>
</ul>
</ul>

Im CSS gibt es ein
ul.sitemap li {
 border: #FF6600 1px solid;
 list-style: none;
}

So, was passiert:
Der Mozilla verhält sich wie erwartet und zeichnet brav um jeden Listenpunkt einen Rahmen.
Der IE zeichnet zwar auch um jeden Listenpunkt einen Rahmen, aber auch einen großen Rahmen um die ganze Unterliste. Ich kann mir irgendwie nicht erklären wie der auf die Idee kommt (denn der Rahmen ist ja ganz klar dem li zugewiesen, das zu Beginn der Unterliste schon wieder vorbei ist) das so zu rendern. Wie dem auch sei ich will dem IE irgendwie auf die Finger hauen, damit er dieses unsinnige Verhalten bleiben lässt - irgendwelche Ideen, wie sichd as bewerkstelligen lässt?

Grüsse

Marc

[Gunnar Bittersmann]

AllesMeins,
Es macht wenig Sinn über CSS nachzudenken, wenn es nicht auf valides HTML (XML, …) losgelassen wird.

ul darf kein Kind von ul sein.

Live long and prosper,
Gunnar

[AllesMeins]

Hiho,

du glaubst doch nicht ernsthaft das der IE sich mit sowas einfachen wie validen HTML überlisten lässt :) Hab das jetzt geändert und er reagiert prompt mit dem nächsten Ärgerniss. Und zwar rendert er mir nun einen schönen dicken fetten Absatz an den Beginn einer jeden Unterliste. Irgend eine Idee, wie ich den weg bekommen könnte?

Grüße

Marc

[Gunnar Bittersmann]

du glaubst doch nicht ernsthaft das der IE sich mit sowas einfachen wie validen HTML überlisten lässt :)

Aber mit nicht validem HTML überlistet er dich. ;-)

http://validator.w3.org/ erzählt dir „element "INHALT" undefined.“

Warum wohl? ;-)

Live long and prosper,
Gunnar

[AllesMeins]

Hiho,

ich glaube du hast mich falsch verstanden.
Ich habe mein HTML valide gemacht. Der validator erzählt mir überhaupt nichts mehr ausser: "This Page Is Valid XHTML 1.0 Transitional!"

Mein derzeitiges Problem ist also wirklich ein reines CSS vs. IE Problem.

Grüße

Marc

[Gunnar Bittersmann]

ich glaube du hast mich falsch verstanden.
Ich habe mein HTML valide gemacht. Der validator erzählt mir überhaupt nichts mehr ausser: "This Page Is Valid XHTML 1.0 Transitional!"

Du hast also das "<", was zuviel war, gefunden.

Dann weiß ich nicht, welchen „schönen dicken fetten Absatz“ du meinst. Bei mir sieht’s im IE und FF völlig identisch aus.

Allerdings wüsste ich nicht, wie man nur diejenigen li selektieren sollte, die kein ul enthalten. Ich schätze, das geht nicht.

Live long and prosper,
Gunnar

[AllesMeins]

Hiho,

mein Code sieht jetzt so aus (gekürzet):

<ul>
<li class="sitemap">INHALT</li>
<li class="sitemap">INHALT</li>
<li style="list-style:none;">
<ul class="sitemap_sub">
<li>SUBINHALT</li>
<li>SUBINHALT</li>
</ul>
</li>
<li class="sitemap">INHALT</li>
<li class="sitemap">INHALT</li>
</ul>

Und das dazugehörige CSS:

.sitemap {
 border: #FF6600 1px solid;
 padding-left: 3px;
 margin: 4px;
 width: 15em;
 list-style: none;
}

.sitemap_sub {
 background-color: #f00;
 margin-left: 23px;
 list-style-image: url("../bilder/sitemap_bullet.gif");
}

Grüsse

Marc

[Gunnar Bittersmann]

AllesMeins,

Hiho,

mein Code sieht jetzt so aus (gekürzet):

<ul>
<li class="sitemap">INHALT</li>
<li class="sitemap">INHALT</li>
<li style="list-style:none;">

Sehr unschön. Wollten wir nicht Struktur und Layout trennen? style-Attribute sind nie good style.

Das brauchst du auch nicht, wenn du list-style-type für die Listen angibst.

Außerdem gehört die Sub-Navigationsliste doch zu dem vorigen Listenpunkt, nicht in einen eigenen, oder?

<ul class="sitemap">  
  <li class="sitemap">INHALT</li>  
  <li class="sitemap">INHALT  
     <ul class="sitemap_sub">  
       <li>SUBINHALT</li>  
       <li>SUBINHALT</li>  
     </ul>  
   </li>  
   <li class="sitemap">INHALT</li>  
   <li class="sitemap">INHALT</li>  
</ul>

Im Stylesheet:

ul.sitemap, ul.sitemap ul {list-style-type: none}

Live long and prosper,
Gunnar

[AllesMeins]

Hiho,

Außerdem gehört die Sub-Navigationsliste doch zu dem vorigen Listenpunkt, nicht in einen eigenen, oder?

Dann ist die Subnavigation aber mit in dem Kasten, oder?

Grüße

Marc

[Gunnar Bittersmann]

Dann ist die Subnavigation aber mit in dem Kasten, oder?

Ja, das ist mir dann im Nachhinein auch eingefallen.

Einen Rahmen nur um INHALT bekommst du dann wohl nur, wenn du das in ein weiteres Element einschließt:

  <li class="sitemap"><div>INHALT</div>  
    <ul class="sitemap_sub">  
      <li>SUBINHALT</li>  
      <li>SUBINHALT</li>  
    </ul>  
  </li>  

Von ausschließlich strukturellem Markup ohne Hinblick auf die gewünschte Darstellung kann in keiner der beiden Varianten gesprochen werden.

Live long and prosper,
Gunnar

[AllesMeins]

Hiho,

ok, dann geht es wohl nicht anders als mit nem neuen Element. Auch wenn ich das eigentlich vermeiden wollte :-/

Aber jetzt noch mal ne rein theoretische Frage (denn zum Glück will ich das nicht machen). Was wäre denn, wenn ich den selben Designwunsch hätte (Hauptmenupunkte eingerahmt, Submenupunkte nicht) mit der kleinen Änderung das der Aufzählungspunkt mit in den Rahmen soll. Wenn es wirklich nur mit nem zusätzlichen Element drinne zu machen ist, würde daraus ja folgen das diese Variante mit CSS absolut unmöglich ist, oder?

Marc

[Ashura]

Hallo Gunnar.

Allerdings wüsste ich nicht, wie man nur diejenigen li selektieren sollte, die kein ul enthalten. Ich schätze, das geht nicht.

Meinst du?

ul li{border:1px dotted #333;}  
ul li ul li{border:none;}

Einen schönen Mittwoch noch.

Gruß, Ashura

[MudGuard]

Hi,

Allerdings wüsste ich nicht, wie man nur diejenigen li selektieren sollte, die kein ul enthalten. Ich schätze, das geht nicht.
Meinst du?

ul li{border:1px dotted #333;}

ul li ul li{border:none;}

  
Wo werden denn damit die li selektiert, die kein ul enthalten?  
  
Du überschreibst für tiefer verschachtelte li eine Eigenschaft.  
Auf das äußere li trifft nach wie vor der erste Deiner beiden Selektoren zu, das äußere li wird also eine border erhalten.  
  
Es ist mit CSS nicht möglich, Elemente anhand darin enthaltener Elemente zu selektieren.  
CSS 3 bietet nur die Möglichkeit, anhand von enthaltenem Text zu selektieren per :contains("bla").  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://www.Mud-Guard.de/)  
[Schreinerei Waechter](http://www.schreinerei-waechter.de/)  
  
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.  

[Ashura]

Hallo MudGuard.

Hi,

Allerdings wüsste ich nicht, wie man nur diejenigen li selektieren sollte, die kein ul enthalten. Ich schätze, das geht nicht.
Meinst du?

ul li{border:1px dotted #333;}

ul li ul li{border:none;}

>   
> Wo werden denn damit die li selektiert, die kein ul enthalten?  
  
Gar nicht, es ist ein Workaround, den du hier ...  
  

> Du überschreibst für tiefer verschachtelte li eine Eigenschaft.  
> Auf das äußere li trifft nach wie vor der erste Deiner beiden Selektoren zu, das äußere li wird also eine border erhalten.  
  
... richtig erfasst hast.  
Dass das äußere li-Element eine Border erhält war ja gewünscht, so wie ich Gunnar's Posting interpretiere.  
  

> Es ist mit CSS nicht möglich, Elemente anhand darin enthaltener Elemente zu selektieren.  
  
Also auch nicht mit :not()? (Ja, ich habe es ausprobiert, weiß aber noch immer nicht, ob ich damit auf Kindelemente prüfen kann.)  
  

> CSS 3 bietet nur die Möglichkeit, anhand von enthaltenem Text zu selektieren per :contains("bla").  
  
Wobei mir hier noch ^ und $ in ihrer Sonderbedeutung fehlen.  
  
  
Einen schönen Donnerstag noch.  
  
Gruß, Ashura  

-- 
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|  
[30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Firefox tools for Opera built-ins](http://operalover.tntluoma.com/8/firefox_tools_for_opera_builtins)  
Meine Browser: [Opera 8.02](http://my.opera.com/noctus/affiliate/) | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0  
[MathML](http://de.wikipedia.org/wiki/MathML) fetzt

[Gunnar Bittersmann]

Dass das äußere li-Element eine Border erhält war ja gewünscht, so wie ich Gunnar's Posting interpretiere.

Nee, Ashura, bei

foo
  bar
  baz

soll der Rahmen nur um foo sein, nicht bar und baz mit einschließen.

Live long and prosper,
Gunnar

[Ashura]

Hallo Gunnar.

Nee, Ashura, bei

foo
  bar
  baz

soll der Rahmen nur um foo sein, nicht bar und baz mit einschließen.

Also soll nur der Text und nicht das Element mit dem Rahmen versehen werden.
Dies ist in der Tat momentan noch nicht sauber möglich.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Gunnar Bittersmann]

der Rahmen ist ja ganz klar dem li zugewiesen, das zu Beginn der Unterliste schon wieder vorbei ist

AllesMeins,
Du verwechselst nicht zufällig Nachfahrenselektor [CSS2 §5.5] und Kindselektor [CSS2 §5.6]?

Live long and prosper,
Gunnar