[CSS] Bij Hover over Menu kapt pagina af in IE6

[GustavSan]

Hallo,

Ik werk al een tijdje met het Ultimate CSS Menu v2 van Stu Nicholls (ccsplay). Ik heb een vrij forse site, en die ben ik aan het redesignen. Ik heb de site al meerdere malen getest, maar nu ik aan het einde ben, viel me ineens een groot probleem in IE6 (en wellicht ook IE7, moet ik vanmiddag nog testen) op. Dit probleem was me nog niet eerder opgevallen, omdat ik simpelweg die specifieke situatie nog niet kon nabootsen.

Wat gebeurt er:

Als ik in IE6 een lange pagina heb, en ik hover (mouse-over) over het menu, dan klapt de pagina in, tot de hoogte van de rechterkolom van de pagina (2e div).

Ik werk in het content gedeelte met 2 divs, die ik met float: left; en overflow: hidden; naast elkaar heb gekregen. Dit werkt verder prima. Ik heb hierdoor links een 500px brede box met tekst, en rechts een 200px brede box met submenu's etc. In veel gevallen heb ik meer content dan items in de rechterkolom.

Ga ik nu met de muis in IE6 over het menu, dan kapt de pagina af tot de hoogte van de rechterkolom. Als ik refresh ziet het er weer goed uit. Dit probleem heb ik niet in FF.

Hier twee stukjes css van de divs (boxen links en rechts)

code:

#lftcol1 {
    float: left;
    width: 550px;
    background: transparent;
    overflow: hidden;
    margin-top: 5px;
    z-index:-1;

code:

#rgtcol1 {
    float: left;
    width: 198px;
    overflow: hidden;
    margin-top: 5px;
    background: #FFFFFF;
    border: 1px solid #709FD3;

Binnen de linkerdiv zitten de volgende divs:

code:

.box { 
    width:510px; 
    float:left; 
    margin-top:5px;
    margin-left:15px;
    border-bottom:2px solid #E2F1FA;

Daarbinnen:

code:

.xboxcontent {
    display:block; 
    border:0 solid #E2F1FA; 
    height:auto;
}

Binnen de css van het menu zie ik zelf niet zo gauw onderdelen die aan het probleem kunnen bijdragen. Toch is het wel vreemd dat het menu de 'trigger' is. In het menu zelf staat helemaal niks over hoogtes en dat soort afhankelijkheden. Het wordt wel erg duidelijk precies ter hoogte van de rechterdiv afgekapt. Ik heb alle onderdelen van de divs al aangepast, maar het probleem lijkt niet te verdwijnen...(hiermee bedoel ik dat ik in elke div zo'n beetje wel wat heb verwijderd, dan gesaved, dan gechecked...)

Iemand suggesties, of kan iemand mij op weg helpen?

Dank,

[We Are Borg]

Niet dat het gerelateerd hoeft te zijn aan het probleem, maar z-index en IE is vaak een no-go. Persoonlijk zou ik even een case online zetten waar het probleem zich voordoet. Dan is het veel makkelijker te testen en een oplossing aan te dragen

[GustavSan]

Hmm..ik heb onder het menu een div, puur om een deel van de banner in op te nemen.

<div id="subnav"></div>

met als css:

code:

#subnav {   /* Ruimte onder menu */
    width: 770px;
    height: 120px;
    background: url('images/mainbanner3d.jpg');
    background-repeat:no-repeat;
}

Hierbinnen zit geen content. Als ik dit stuk weghaal, dan werkt het wel in IE6....laat ik dit erin..dan klapt de site 'dicht'....