mysteriöse Abstände bei Menü

[tim-peters]

Hey
Ich realisiere grade ein neus Projekt. Jetzt habe ich folgendes Problem beim Menü: Geht man mit der Maus auf einen bestimmten Menüpunkt (<li>) öffnet sich der dazugehörige Unter-Menüpunkt (<li><ul><li>). Beim Mozilla funktioniert auch alles prächtig. Nur IE zeigt zwischen den Untermenüpunkten etwa 5px Zwischenraum an. Bewegt man jetzt die Maus über den Zwischenraum verschwinden die Untermenüpunkte. Ich habe schon padding:0 und margin:0 ausprobiert = keine Veränderung - die Zwischenräume bleiben.
woher könnte das kommen?

auszug aus PhysikAG

<ul id="nav"><li>
<a href="?id=about" title="about">about</a>
</li>
<li>
<a href="?id=versuche" title="versuche">versuche</a>
<ul>
<li>
<a href="?id=Plastiktueten sammeln" title="Plastiktüten sammeln">Plastiktüten sammeln</a>
</li>
<li>
<a href="?id=Plasma in der Microwelle" title="Plasma in der Microwelle">Plasma in der Microwelle</a>
</li>
<li>
<a href="?id=solarzeppelin" title="solarzeppelin">solarzeppelin</a>
</li>
</ul>
</li>
<li>
<a href="?id=bilder" title="bilder">bilder</a>
</li>
</ul>

auszug aus http://9a-web.nordicwalking-badvilbel.de/PhysikAG/css/style.css

ul#nav {
    background:#FF00FF url(../pics/navi.jpg) bottom no-repeat;
    width:691px;
    height:25px;
    margin: 0 auto 0 auto;
    padding:0 4px 0 5px;
    list-style: none;
    line-height: 1;
}

#nav a {
    display: block;
    padding:5px 15px 5px 15px;
    color: #fff; 
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    text-decoration:none;
}

#nav li { /* all list items */
    float: left;
    border-right:1px solid #FF66CC;
}

#nav li:hover {
    background:#FF00FF url(../pics/navi.jpg) top no-repeat;
}

#nav li ul { /* second-level lists */
    position: absolute;
    width: 150px;
    height:auto;
    left: -999em;
    text-decoration: none;
    z-index: 20;
    list-style:none;
    margin-top:-3px;
}

#nav li ul li {
    border:1px solid #ccc;
    background:#fff;
    float:none;
    width:148px;
    height:35px;
}

#nav li ul li a {
    color:#666;
    margin:auto;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav             li.sfhover ul ul ul {
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered     list items */
    left: 50%;
    margin-left:-360px;
}

schonmal vielen Dank für eure Hilfe im vorraus
lg
Tim-

 

[_Thor_]

Gib den Listenelementen in #nav li ul li auch mal margin: 0

 

[tim-peters]

hab ich gemacht = keine Veränderung

 

[threadi]

Ergänze:

* html #nav li { height: 1%; }

und frag lieber nich wieso

Btw. würde ich auf die Pseudoklasse hover bei li-Elementen verzichten. Das versteht der IE6 nicht. Alternative ist nur JavaScript.

 

[tim-peters]

hab ich versucht..hat nur die höhe geändert, aber die Abstände blieben.

Werde mich wohl ma an JavaScript ran machen.

 

[_Thor_]

hab ich versucht..hat nur die höhe geändert, aber die Abstände blieben.

Nimm das ganze CSS nochmal raus, gibt den Listenelementen margin: 0 und padding: 0 und füge die anderen Eigenschaften nach und nach hinzu, dann wirst du herausfinden, woran es liegt. So würde ich es machen. Das geht sicher schneller, als planlos herum zu probieren.

Werde mich wohl ma an JavaScript ran machen.

Für ein Menü ist das keine gute Idee, denn dann funktioniert es nicht, wenn JavaScript deaktiviert ist.

 

[tim-peters]

Nimm das ganze CSS nochmal raus, gibt den Listenelementen margin: 0 und padding: 0 und füge die anderen Eigenschaften nach und nach hinzu,

hab genau das getan und dabei raus gefunden, dass "float:none;" an den Abständen Schuld war. Verstehe allerdings nich wirklich warum, schließlich sollte "float:none;" doch eigendlich nur dafür sorgen, dass nich zwei <li>-Elemnte in einer Zeile landen.

Auf jeden Fall schonaml vielen dank für eure Mühe!


P.S.: Hab jetz als Ergänzung noch ein Script geschrieben, dass dem IE6 :hover für <li> Elemente beibringt.

 

[neuroleptika]

P.S.: Hab jetz als Ergänzung noch ein Script geschrieben, dass dem IE6 :hover für <li> Elemente beibringt.

Du hattest von Anfang an ein funktionierendes Script.