verschachtelte ul im ie mit leerzeile.

[Shingoo]

Hallo allerseits.

Ich bin langsam am verzweifeln. Ich hab eine Navigation, welche mit verschachtelten ul's einen Menübaum darstellt. Im Firefox tut das auch. Dieser zeigt an der Stelle der ersten Verschachtelung direkt die "hinengeschachtelte" ul liste. der ie macht erstmal eine leerzeile.

unter http://www.shingoo.de könnt ihr euch das mal anschauen.

ff geht, ie nicht.

html-code:

<div id="menu">
<ul>
<li>
<a href="start?menuId=PAGE_HOME" target="_self">
<img src="bilder//framework/self.gif" />
Home
</a>
</li>
<li>
<ul>
<li>
<a href="start?menuId=PAGE_MY_AREA" target="_self">
<img src="bilder//framework/self.gif" />
MyShingoo
</a>
</li>
<li>
<a href="start?menuId=pageTour" target="_self">
<img src="bilder//framework/self.gif" />
Guided Tour
</a>
</li>
<li>
<a href="start?menuId=pageFuture" target="_self">
<img src="bilder//framework/self.gif" />
Ausblick
</a>
</li>
<li>
<a href="start?menuId=pageImpressum" target="_self">
<img src="bilder//framework/self.gif" />
Impressum
</a>
</li>
</ul>
</li>
</ul>
</div>

css:

div#menu {
 padding:10px;
 width:179px;
 float:left;
}

div#menu ul{
 margin:0;
 padding:0;
 list-style-type:none;
}

div#menu li{
 margin-top:4px;
}

div#menu li ul{
 margin:0;
 margin-left:15px;
 padding:0;
 list-style-type:none;
}

Ich wäre Euch riesig dankbar, wenn Ihr mir weiterhelfen könntet. Ich weiß einfach nicht mehr weiter.

Vielen Dank und viele Grüße

Roman

[Gernot Back]

Hallo Shingoo,

du könntest ebenfalls die LI-Elemente deiner Listen floaten lassen und mit passender Weite und/oder einem clear bewirken, dass dennoch nur jeweils eines von ihnen nebeneinander (also sprich alle jeweils in einer neuen Zeile) angezeigt werden.

Gruß Gernot

[Shingoo]

Fast perfekt ;)

Hab das CSS so angepasst:

div#menu {
 padding:10px;
 width:179px;
 float:left;
}

div#menu ul{
 margin:0;
 padding:0;
 list-style-type:none;
}

div#menu li{
 clear:both;
 margin-top:4px;
}

div#menu li ul{
 margin:0;
 margin-left:15px;
 padding:0;
 list-style-type:none;
 float:left;
}

Jetzt tut es schon viel besser, bleibt nur noch das problem, dass vor jeder verschachtelten ul meine 4px margin-top verdoppelt sind... warum auch immer und nur im ie ;(

hast du dafür auch ne idee?

Vielen vielen Dank. Mir ist ein Stein vom Herzen gefallen.

Gruß Roman

[Shingoo]

Hmpf, quatsch...

in beiden Browsern das gleiche. ist im Prinzip nicht schlimm, aber dann sollte es wenigstens nicht nur oberhalb, sondern auch unterhalb einer verschachtelung mehr Platz haben ?!

Komisch...

[Gernot Back]

Hallo Shingoo,

div#menu li{
clear:both;
margin-top:4px;
}

Jetzt tut es schon viel besser, bleibt nur noch das problem, dass vor jeder verschachtelten ul meine 4px margin-top verdoppelt sind... warum auch immer und nur im ie ;(

hast du dafür auch ne idee?

Ja, heb die vier Pixel Abstand für die LI-Elemente zweiter und noch höherer Ordnung doch wieder auf!

  
div#menu li{  
   margin-top:0;  
}  

Gruß Gernot

[Gernot Back]

Hallo nochmal,

Ja, heb die vier Pixel Abstand für die LI-Elemente zweiter und noch höherer Ordnung doch wieder auf!

div#menu li{
   margin-top:0;
}

  
Wenn man mit Copy-and-paste arbeitet, vergisst man leicht das Entscheidende:  
  
~~~css
  
  div#menu li li {  
´ margin-top:0;  
}  

Gruß Gernot

[Shingoo]

Hi Gernot,

danke für Deine schnelle und kompetente Hilfe ;)

hab jetzt noch 4px bottom eingefügt...

div#menu li ul{
 margin:0;
 margin-left:15px;
 margin-top:-4px;
 margin-bottom:4px;
 padding:0;
 list-style-type:none;
 float:left;
}

Jetzt sieht es in beiden browsern ok aus. aber gleich bekomme ich es nicht. ziel wäre es zwischen allen zeilen den gleichen abstand zu haben.

mit verschachtelten li li 0px sind die zeilen der eingerückten liste zu eng... man kommt wohl nicht um eine css browserweiche herum ;(

danke nochmal gruß roman

[Shingoo]

Hi Gernot,

ich glaube wir haben uns da missverstanden. die 4px gehören da schon hin, da sonst die zeilen der listenelemente so eng stehen. im ie passt auch alles so wie es ist, nur im ff ist nach der ersten eingerückten/geschachtelten liste gar kein abstand zwischen der letzen zeile der eingerückten/geschachtelten und der ersten zeil der übergeordneten liste.

keine ahnung warum, da doch ein li 4px margin top hat und nach der geschachtelten liste wieder ein li kommt ;(

gruß roman

[Gernot Back]

Hallo Shingoo,

keine ahnung warum, da doch ein li 4px margin top hat und nach der geschachtelten liste wieder ein li kommt ;(

Ich vermute, du möchtest deine Liste lieber so schachteln

  
<div id="menu">  
   <ul>  
      <li><a href="start?menuId=PAGE_HOME">Home</a>  
          <ul>  
             <li><a href="start?menuId=PAGE_MY_AREA">MyShingoo</a></li>  
             <li><a href="start?menuId=pageTour">Guided Tour</a></li>  
             <li><a href="start?menuId=pageFuture">Ausblick</a></li>  
             <li><a href="start?menuId=pageImpressum">Impressum</a></li>  
          </ul>  
      </li>  
   </ul>  
</div>  

und die Bilder den Links als Hintergrundbilder zuweisen:

  
div#menu li a{  
   background:url(bilder/framework/self.gif) no-repeat 0 50%;  
   padding-left:12px;  
}  

Gruß Gernot

[Shingoo]

Ja, ich denke das könnte passen... Muss ich meine rekursive Generierungklasse umschreiben (und erstmal wieder verstehen ;)

Danke für die Hilfe. Werde es jetzt wohl hinbekommen ...

Gruß Roman