[CSS/Javascript] suckerfish menu valt achter div in FF

[Foutlook]

Ik heb het suckerfish menu van ALA gepakt om deze in een site in te bouwen.

Dit gaat opzich voorspoedig, maar nu loop ik tegen iets geks aan. Als het uitklapmenu over een andere div heenvalt, en je gaat met de muis over dat overlappende gedeelte van het uitklapmenu, dan verdwijnt deze in Firefox! In IE blijft het uitklapmenu wel gewoon netjes staan.

Het menu is hier te zien. Het 3e en het 5e menu-item hebben een uitklapmenu. De div die overlapt wordt door beide uitklapmenu's is de div 'inhoud' die eronder gepositioneerd staat.

Ik heb al met de z-index lopen spelen maar dit heeft geen effect.
Weet iemand hoe ik het menu ook zichtbaar kan laten blijven in Firefox?

[Morrar]

ws. heeft het ermee te maken dat div.inhoud absoluut gepositioneerd is terwijl de rest dat niet is. Probeer div.inhoud ook inline te maken zou ik zeggen. Zo werkt t nl. wel, alleen is de positionering dan een beetje jammer :

code:

#inhoud {
   width: 460px;
   overflow: auto;
}

[ Voor 32% gewijzigd door Morrar op 18-03-2005 11:43 ]

[Foutlook]

Morrar schreef op vrijdag 18 maart 2005 @ 11:40:
ws. heeft het ermee te maken dat div.inhoud absoluut gepositioneerd is terwijl de rest dat niet is. Probeer div.inhoud ook inline te maken zou ik zeggen. Zo werkt t nl. wel, alleen is de positionering dan een beetje jammer :

code:

#inhoud {
   width: 460px;
   overflow: auto;
}

Zelfs als ik jouw code snel toepas heeft dit bij mij geen effect op de werking. In Firefox verdwijnt het uitklapmenu nog steeds als ik over over het stukje ga waar de div 'inhoud' onder ligt...

Edit: erger nog, hij doet het dan in IE ook niet
Wat zou het dan kunnen zijn??

[ Voor 8% gewijzigd door Foutlook op 18-03-2005 11:51 ]

[Foutlook]

Ik heb nu gevonden wat het wel is: ik moet de 'overflow:auto;' uitzetten in de #inhoud. Dan doen Firefox en IE het allebei keurig.

Probleem is uiteraard.....ik wil wel die overflow = auto gebruiken omdat anders mijn layout vernaggeld worden met scrollen Wat is nu het handigst? Met javascript de style.overflow op leeg zetten als ik het uitklapmenu open en vervolgens weer op 'auto' zetten als ik van het uitklapmenu wegnavigeer?
Of heeft iemand een mooiere oplossing?

[paragon]

Ik had precies hetzelfde probleem als jij hebt. De overflow veranderen via javasript is alleen niet echt een mooie oplossing omdat er dan steeds een scrolbalk verdwijnt en verschijnt. Als je toch javescript wil gebruiken, moest iig toch al voor IE, zorg er dan voor dat deze ook in FF werkt Bij mij is het zoiets geworden

JavaScript:

timer1 = 0;
function roll() {
    if (document.getElementById) {
        navRoot = document.getElementById("nav1");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className="over";
                    clearTimeout(timer1);
                }
                node.onmouseout=function() {
                    under(this);
                }
            }
        }
    }
}

function under(element) {
    el = element;
    timer1 = setTimeout('el.className="under"', 50);
}

Cascading Stylesheet:

li ul, li.under ul {
    position:absolute;
    left:0px;
    display:none;
}
li:hover ul, li.over ul { 
    display:block;
    z-index:3;
}

[ Voor 13% gewijzigd door paragon op 18-03-2005 20:54 ]

[Foutlook]

paragon schreef op vrijdag 18 maart 2005 @ 20:52:
Ik had precies hetzelfde probleem als jij hebt. De overflow veranderen via javasript is alleen niet echt een mooie oplossing omdat er dan steeds een scrolbalk verdwijnt en verschijnt. Als je toch javescript wil gebruiken, moest iig toch al voor IE, zorg er dan voor dat deze ook in FF werkt Bij mij is het zoiets geworden (knip)

Aha, ik vroeg me al af of ik de enigste was met dit probleem Bedankt voor het posten van de oplossing! Zodra ik thuis ben, ga ik het gelijk proberen.

Edit: Nou, ik heb het uitgeprobeerd en het werkt perfect. Thnx paragon!

[ Voor 6% gewijzigd door Foutlook op 21-03-2005 10:55 ]

[Foutlook]

Even een kick in dit topic aangezien ik een ander probleem heb met ditzelfde menu.
Het 2e niveau ziet er namelijk in Firefox niet lekker uit. Ik denk dat dit komt omdat de ul met hierin het 2e niveau volgens Firefox buiten de li staat waarin deze ul is opgenomen.

Ter verduidelijking:

Goed (IE 6)


Fout (Firefox 1.0.1)

Rara hoe kan ik dit oplossen? Het menu is nog steeds te vinden op gortel.com.