Overlapping IE7

[riccardot]

Besten,

Ik overzicht gemaakt in php van een aantal berichten. Die berichten worden als volgt getoont:
<ul id="nav">
<li>
<ul class="inlist">
<li class="initem">Titel</li><li class="inneritem">Datum</li>
</ul>
</li>
</ul>

De volgende css en javascript zorgen ervoor dat de eerste li kan uitklappen in zijn geheel (dus inclusief de twee items Titel en Datum:

code:

.inlist {
   padding: 0;
   margin: 0;
   list-style: none;
}

.initem { 
   float: left;
   position: relative;
   width: 252px;
   background: white;
}

.eventlist { /* alle lists */
   padding: 0;
   margin: 0;
   list-style: none;
   width: 504px;
}

.eventitem { /* alle list items */
   float: left;
   position: relative;
   width: 504px;
   background: white;
   border-bottom: 1px solid #C0C0C0;
}

.event_itemlist { /* sub items */
   padding: 6px;
   display: none;
   position: absolute;
   top: 1em;
   left: 0;
   background: white;
   list-style: none;
   width: 492px;
   float: left;
   z-index: 10;
}

.event_itemlist p {
    margin: 0;
}

.event_itemlist img {
    float: left;
    margin: 10px;
    border: 0;
}

.event_itemlist a {
    border: 0;
    margin: 0;
    padding: 0;
    color: white;
}

.eventitem>ul { /* postitie resetten voor alle browsers behalve IE */
   top: auto;
   left: auto;
}

.eventitem:hover ul, .eventitem.over ul { /* lists nested onder hovered list items */
   display: block;
}

javascript:
        startList = function() {
           if (document.all&&document.getElementById) {
              navRoot = document.getElementById("nav");
              for (i=0; i<navRoot.childNodes.length; i++) {
                 node = navRoot.childNodes[i];
                 if (node.nodeName=="LI") {
                    node.onmouseover=function() {
                       this.className+=" over";
                    }
                    node.onmouseout=function() {
                       this.className=this.className.replace(" over", "");
                    }
                 }
              }
           }
        }
        window.onload=startList;

Nu heb ik het volgende probleem:
In Firefox 2 werkt dit perfect, maar in IE7 gebeurt het volgende:
Als er twee items zijn (dus twee keer titel+datum), en ik ga met de muis over het eerste item, klapt deze wel uit, maar wordt de uitgeklapte lijst overlapt door het tweede item (titel+datum).
Heb al van alles geprobeert met z-index maar het wil niet werken.

Wie weet de oplossing?

gr riccardo

[Bozozo]

Je gebruikt Suckerfish, maar dat doe je niet goed. Hier staat de beste uitvoering van suckerfish dropdowns.

[riccardot]

Oke bedankt dan ga ik daar eens naar kijken!

[riccardot]

Nu zit ik met het volgende probleem, in FF klapt het menu keurig naar onder uit. In IE7 klapt hij echt ernaast uit. Zie http://photo.bus3.nl/nextevents.txt .

Hoe kan ik ervoor zorgen dat in IE7 het zelfde gebeurd als in FF2?

gr riccardo

[riccardot]

Iemand?

[f.v.b]

De logica van je vraag ontgaat me een beetje, maar als je de volgende CSS toevoegt, dan gaat IE zich hetzelfde gedragen als Firefox:

Cascading Stylesheet:

#nav
{
   position: relative;
}

#nav li:hover ul, #nav li.sfhover ul
{
   left: 0px;
}

De laatste left: 0px, vervangt de left: auto die daar nu staat.

[riccardot]

Oke bedankt! Ik probeer het even uit

[riccardot]

Werkt idd goed. Hardstikke bedankt!