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

vrijdag 18 maart 2005 10:38

Acties:

Topicstarter

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?

vrijdag 18 maart 2005 11:40

Acties:

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 ]

vrijdag 18 maart 2005 11:50

Acties:

Foutlook

Topicstarter

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:
1
2
3
4
#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 ]

vrijdag 18 maart 2005 11:59

Acties:

Foutlook

Topicstarter

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?

vrijdag 18 maart 2005 20:52

Acties:

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 ]

zaterdag 19 maart 2005 15:13

Acties:

Foutlook

Topicstarter

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 ]

dinsdag 22 maart 2005 13:37

Acties:

Foutlook

Topicstarter

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:
Afbeeldingslocatie: http://www.gortel.com/afbeeldingen/ie.gif

Afbeeldingslocatie: http://www.gortel.com/afbeeldingen/ie.gif

Goed (IE 6)

Afbeeldingslocatie: http://www.gortel.com/afbeeldingen/firefox.gif

Fout (Firefox 1.0.1)

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

Pagina: 1

Reageer