Verschachtelte Liste treibt mich in den Wahnsinn...

[Elya]

Hallo,
naja, ganz so schlimm ist es nicht, aber ich habe hier einen merkwürdigen Effekt bei einer Liste mit "Unter"-Liste.

Also ganz grob:

<ul>
<li>kat 1</li>
<li>
   <ul>
   <li>kat 1</li>
   </ul>
</li>
</ul>

Das Problem (nur bei IE):
setze ich bei dem äußeren ul li die gelbe Test-border auf 0, entsteht zwischen dem 1. und 2, <li> der äußeren Liste ein größerer Abstand. Also zwischen dem "normalen" <li> und dem, der die Unterliste enthält. Etwas kompliziert, am besten bitte mal anschauen.

Komisch ist auch, daß eine border-top (rot) für die äußere <ul> nur eine Linie oben am Block setzt, wenn die gelbe Linie weg ist (also eigentlich korrekt), aber bei Vorhandensein der gelben Linien um die <li>s jedoch über jede Unterliste eine border legt. Hier tippe ich auf ein Vererbungsproblem, aber ich komm einfach nicht drauf. Kann mir bis hier noch jemand folgen ;-) ?

Zu betrachten hier: http://visuelya.arcsite.de/self/sitemap_test.html mit Border
http://visuelya.arcsite.de/self/sitemap_test2.html ohne Border

Der relevante CSS-Code:
#sitemap {
          margin-left:53px;
          padding:0;
          font-family:Arial,Helvetica,sans-serif;
          font-size:1em;
          color:#efefef;
          background-color:inherit;

}
/* Oberkategorie Liste */
#sitemap ul  {
   border-top:1px dashed red;
   margin-top:0;
   margin-left:0;
   margin-bottom:0;
   padding-left:15px;
   }
#sitemap ul li {
         list-style-type:square;
         padding-left:0px;
         margin-left:0;
         margin-top:0;
         margin-bottom:0px;
         color:#e40000;
         list-style-position:outside;
         background-color:transparent;
         border:1px dashed yellow;

}

/* Artikel Liste */
#sitemap ul li ul  {
   border:1px solid white;
   margin-top:0;
   margin-left:0;
   padding-left:15px;
   font-weight:normal;
   }

#sitemap ul li ul li {
         list-style-image:url(../img/li_icon.gif);
         padding-left:0px;
         margin-left:0;
         margin-top:0;
         margin-bottom:2px;
         color:#e40000;
         list-style-position:outside;
         background-color:transparent;
         border:0px dashed blue;
         font-weight:normal;
         }

Gruss aus Koeln-Ehrenfeld,

Elya

[gun]

Hallo,

schau Dich mal hier um: http://css.maxdesign.com.au/listamatic/

Die ganze Site handelt nur von CSS und Listen, hoffentlich wirst Du fündig...

</gun>

[Ingo Turski]

Hi,

ich hab mir dein CSS jetzt nicht genau angesehen, aber ich würde Dir raten, zunächst das HTML zu ändern. Wozu machst Du ein leeres li-Element auf? Du kannst ul direkt in das bereits geöffnete Element setzen, was bei einer Anzeige ohne CSS auch die sonst leeren Listenpunkte vermeidet.

freundliche Grüße
Ingo

[Elya]

Hallo Ingo,

ich hab mir dein CSS jetzt nicht genau angesehen, aber ich würde Dir raten, zunächst das HTML zu ändern. Wozu machst Du ein leeres li-Element auf? Du kannst ul direkt in das bereits geöffnete Element setzen, was bei einer Anzeige ohne CSS auch die sonst leeren Listenpunkte vermeidet.

weil laut http://forum.de.selfhtml.org/archiv/2003/11/63514/#m360262

ein <ul> kein anderes <ul> enthalten darf, sondern nur <li>, ein <li> hingegen auch weitere <ul>. So hab ich's jedenfalls verstanden.

Gruss aus Koeln-Ehrenfeld,

Elya

[Ingo Turski]

Hi,

weil [...] ein <ul> kein anderes <ul> enthalten darf, sondern nur <li>, ein <li> hingegen auch weitere <ul>. So hab ich's jedenfalls verstanden.

Schon korrekt, aber nicht zu Ende gedacht:
<ul>
  <li>Erklärung<ul>
    <li>erster Punkt</li>
    <li>zweiter Punkt</li>
  </ul></li>
</ul>
ist sehr wohl erlaubt und sinnvoller als mit CSS nachzuhelfen...

freundliche Grüße
Ingo

[Elya]

Hallo Ingo,

weil [...] ein <ul> kein anderes <ul> enthalten darf, sondern nur <li>, ein <li> hingegen auch weitere <ul>. So hab ich's jedenfalls verstanden.

Schon korrekt, aber nicht zu Ende gedacht:
<ul>
  <li>Erklärung<ul>
    <li>erster Punkt</li>
    <li>zweiter Punkt</li>
  </ul></li>
</ul>
ist sehr wohl erlaubt und sinnvoller als mit CSS nachzuhelfen...

hmmm... klingt einleuchtend, danke, das werde ich am Montag gleich mal ausprobieren! die Extra-Klasse in dem zusätzlichen li hat mich sowieso gestört, wenn das klappt, ist es auf alle Fälle wieder übersichtlicher.

Gruss aus Koeln-Ehrenfeld,

Elya

[Cyx23]

Hallo Elya,

Schon korrekt, aber nicht zu Ende gedacht:
<ul>
  <li>Erklärung<ul>
    <li>erster Punkt</li>
    <li>zweiter Punkt</li>
  </ul></li>
</ul>
ist sehr wohl erlaubt und sinnvoller als mit CSS nachzuhelfen...

hmmm... klingt einleuchtend, danke, das werde ich am Montag gleich mal ausprobieren! die Extra-Klasse in dem zusätzlichen li hat mich sowieso gestört, wenn das klappt, ist es auf alle Fälle wieder übersichtlicher.

das klappt, ich verwende es z.B. auf http://www.lipfert-malik.de/webdesign/tutorial/css.html, dennoch sind oft beim IE wie manchmal auch bei Opera der Elementfluss oder die Vererbung anders als bei Mozilla.
Beim IE sind einige Verhaltensweisen nur als Bugs erklärbar, und die von mir genannten CSS-Workarounds können auch dem hier genannten HTML-Code immer noch nötig oder sinnvoll sein.

Grüsse

Cyx23

[Cyx23]

Hallo,

Das Problem (nur bei IE):

ich hab dazu mal folgenden Workaround (erstmal wegen Opera mit CSS-Weiche * html) entwickelt:

* html ul{float:left}
 * html ul li{clear:left;}

Der IE ist bei Listen häufig etwas eigen, vgl. auch d. Thread "Unterschied IE <=> NS NAV bei Bildern"

Grüsse

Cyx23

[Elya]

Hallo Cyx23 und Ingo,

Und wieder wurde ein Denkfehler ausgerottet...

Vielen Dank für Eure Hilfe, klappt bestens, bis jetzt ist auch noch keine CSS-Weiche erforderlich.

Gruss aus Koeln-Ehrenfeld + schöne Feiertage,

Elya