[css] z-index voor :hover menu werkt niet in Firefox.

[cyberstalker]

Ik heb een simpel css-menutje gemaakt, met geneste <ul>'s. Het probleem is dat het submenu verdwijnt achter een ander element op de pagina:

De relevante code van het menu en betreffende element:

HTML:

<ul id="menu">
    <li><a href="" id="mnu_hoofdmenu">Hoofdmenu</a></li>
    <li>
        <a href="" id="mnu_modules">Modules</a>
        <ul>
            <li><a href="" id="mnu_nieuws">Nieuws</a></li>
            <li><a href="" id="mnu_fotoboek">Fotoboek</a></li>
            <li><a href="" id="mnu_nieuwsbrief">Nieuwsbrief</a></li>
            <li><a href="" id="mnu_zoekfunctie">Zoekfunctie</a></li>
            <li><a href="" id="mnu_vraagantwoord">Vraag &amp; Antwoord</a></li>
            <li><a href="" id="mnu_maillijst">Maillijst</a></li>
            <li><a href="" id="mnu_kalender">Kalender</a></li>
        </ul>
    </li>
    <li><a href="" id="mnu_layout">Layout</a></li>
    <li><a href="" id="mnu_tekstpaginas">Tekstpagina's</a></li>
    <li><a href="" id="mnu_gebruikers">Gebruikers</a></li>
    <li><a href="" id="mnu_instellingen">Instellingen</a></li>
    <li><a href="" id="mnu_beveiliging">Beveiliging</a></li>
    <li><a href="" id="mnu_help">Help</a></li>
</ul>
[img]"images/hoofdmenu.gif"[/img]
<div id="functionblock">
    <div id="infobox">
        <div />
        <div>
            Voor meer informatie over de onderdelen beweegt u uw muis over een van de knoppen.
        </div>
    </div>
    <ul id="imagebuttons">
        <li>
            <a>[img]"images/buttons/fotoboek.gif"[/img]</a>
            <div>
                tekst hier
            </div>
        </li>
        <li>
            <a>[img]"images/buttons/paginas.gif"[/img]</a>
            <div>
                tekst hier
            </div>
        </li>
        <!-- nog meer <li> elementen -->
    </ul>
</div>

De relevante css-code:

Cascading Stylesheet:

ul#menu
{
    z-index: 2;
}

ul#menu li
{
    z-index: 2;
}

ul#menu li a
{
    z-index: 2;
}

/* submenus */
ul#menu li ul
{
    display: none;
    position: absolute;
    z-index: 2;
}

ul#menu li a:hover + ul
{
    display: block;
}

ul#menu li a + ul:hover
{
    display: block;
}

ul#menu li ul li
{
    z-index: 2;
}

ul#menu li ul li a
{
    z-index: 2;
}

ul#menu li ul li:before
{
    content: '';
}

/* functionblock */
div#functionblock
{
    position: absolute; /* make z-index work */
    z-index: 0;
}

Het probleem is dus dat de div#functionblock boven het uitgeklapte menu blijft staan. Zoals je ziet heb ik ongeveer elk relevant element een z-index gegeven, maar zonder resultaat.

Om het probleem in werking te zien, kun je kijken op http://www.xs4all.nl/~zeep10/test/index.xhtml (werkt momenteel helaas alleen in Firefox).

In opera werkt het menu wel gewoon goed, wat doe ik precies fout?

[Borizz]

Waarom het zo is ben ik nog niet helemaal uit, maar als je de z-index van je #container op 0 zet en je zet de z-index van je function block op -1 dan werkt het wel, en je hoeft dan ook alleen op de #menu een z-index te zetten die hoger is dan -1.

Ik weet wel dat de z-index van een element niet hoger kan zijn dan de z-index van het parent element.

edit: ik ben er al uit:
z-index werkt alleen op positioned elements, je moet ul#menu dus een position relative of absolute meegeven. Dan kan je functionblock en menu t.o.v. elkaar positioneren met de z-index.
Uit het Visual Formatting Model (W3C):

For a positioned box, the 'z-index' property specifies:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a local stacking context.

[ Voor 61% gewijzigd door Borizz op 28-05-2006 14:04 ]

[cyberstalker]

Als ik een position: relative aan mijn ul#menu opgeef, werkt het hele menu helemaal niet meer. Ik krijg nog wel het hover effect te zien op het menu zelf, maar er wordt geen submenu meer geopend.

Daarnaast, de submenu <ul> is wel absoluut gepositioneerd, dat zou toch voldoende moeten zijn?

[crisp]

In feite zijn de enige elementen waar je een z-index zou moeten opgeven inderdaad de submenu ul's (de buggy implementatie van z-index in IE buiten beschouwing latende), echter rammelt er veel meer aan je pagina:
In de eerste plaats zit er helemaal niets in de flow van je body, je hebt je container-div al absoluut gepositioneerd terwijl dat helemaal niet nodig is.
Verder zal je container-div nooit hoger worden dan de min-height van 100px omdat alles wat er verder inzit weer absoluut gepositioneerd is of gefloat en je geen enkele methode toepast om die floats te clearen. Je hebt dus overal puur te maken met overflow, en overflow genereerd geen events.

Borizz:
Firefox is buggy als het gaat om negatieve z-index; niet gebruiken dus, en

Ik weet wel dat de z-index van een element niet hoger kan zijn dan de z-index van het parent element.

z-index is inherited, maar je kan (positioned) child-elementen wel degelijk een hogere z-index geven dan de parent. Dat IE er soms anders mee omgaat komt door IE's waardeloze implementatie.

[ Voor 28% gewijzigd door crisp op 28-05-2006 15:33 ]

[Borizz]

crisp schreef op zondag 28 mei 2006 @ 15:28:


Borizz:
Firefox is buggy als het gaat om negatieve z-index; niet gebruiken dus, en

[...]

z-index is inherited, maar je kan (positioned) child-elementen wel degelijk een hogere z-index geven dan de parent. Dat IE er soms anders mee omgaat komt door IE's waardeloze implementatie.

Wat ik daarmee aan wilde geven (ik heb het verkeerd geformuleerd), dat de z-index van het parent element altijd geldt t.o.v. de andere elementen die onder zijn parent vallen. Dit is dus wat ik bedoel

Stacking contexts are inherited. A local stacking context is atomic; boxes in other stacking contexts may not come between any of its boxes.

[cyberstalker]

crisp schreef op zondag 28 mei 2006 @ 15:28:
In feite zijn de enige elementen waar je een z-index zou moeten opgeven inderdaad de submenu ul's (de buggy implementatie van z-index in IE buiten beschouwing latende),

IE laat ik buiten beschouwing, dat weet je

echter rammelt er veel meer aan je pagina:
In de eerste plaats zit er helemaal niets in de flow van je body, je hebt je container-div al absoluut gepositioneerd terwijl dat helemaal niet nodig is.

Ik heb dat ooit zo ergens gelezen, en dat eigenlijk altijd zo gedaan. Bij deze aangepast, bedankt .

Verder zal je container-div nooit hoger worden dan de min-height van 100px omdat alles wat er verder inzit weer absoluut gepositioneerd is of gefloat en je geen enkele methode toepast om die floats te clearen. Je hebt dus overal puur te maken met overflow, en overflow genereerd geen events.

Hmm, dat zou de reden kunnen zijn dat het menu dan niet werkt met position: relative. Ik had het volgende, naar eigen idee, briljante plan, om steeds het laatste <li> element niet te floaten, zodat de <ul> gewoon een hoogte krijgt. Dit lost echter het probleem niet op, het menu blijft dan gewoon weg.

Ik kan niet echt andere manieren bedenken om het probleem met die floats op te lossen, ik zou alleen het laatste element moeten kunnen clearen. Is hier een goede oplossing voor?

Borizz:
Firefox is buggy als het gaat om negatieve z-index; niet gebruiken dus, en

[...]

z-index is inherited, maar je kan (positioned) child-elementen wel degelijk een hogere z-index geven dan de parent. Dat IE er soms anders mee omgaat komt door IE's waardeloze implementatie.

[crisp]

cyberstalker schreef op zondag 28 mei 2006 @ 23:19:
[...]

Ik kan niet echt andere manieren bedenken om het probleem met die floats op te lossen, ik zou alleen het laatste element moeten kunnen clearen. Is hier een goede oplossing voor?

Of als laatste een extra element toevoegen met de clear-property, of je container een overflow: auto of hidden geven.
Uiteraard moet je dan de absolute positioning van je #navigation verwijderen.
En gek genoeg veroorzaakt de overflow:hidden op je #infobox het grootste probleem (dat lijkt me ergens toch een bug in Firefox, maar die overflow declaratie is sowieso overbodig daar).

[ Voor 26% gewijzigd door crisp op 28-05-2006 23:41 ]

[cyberstalker]

Ik kom er nog steeds niet uit. Ik heb het volgende geprobeerd:

- overflow: hidden uit #navigation gehaald (idd redelijk overbodig)
- Laatste element van <ul> clear: right; geven
- Extra element met clear: all; in <ul> stoppen
- ul#imagebuttons een clear: right geven

Mis ik nog iets zo? Ik kom er namelijk echt niet uit.

[Verwijderd]

<br style="clear:both" /> als laatste element in je container misschien?

of als je nog een footer wil clear both op de footer zetten

[DamadmOO]

Volgens mij probeer jij gewoon het suckerfish menu na te maken. Ik heb deze recentelijk ook gebruikt en hij werkt helemaal goed crossbrowser. Misschien moet je eens kijken op http://www.alistapart.com/articles/dropdowns voor de manier waar hun het mee oplossen.

[cyberstalker]

Verwijderd schreef op zondag 04 juni 2006 @ 13:46:
<br style="clear:both" /> als laatste element in je container misschien?

of als je nog een footer wil clear both op de footer zetten

Extra elementen met clear, e.d. heb ik al geprobeerd, zonder enig resultaat.

DamadmOO schreef op zondag 04 juni 2006 @ 13:48:
Volgens mij probeer jij gewoon het suckerfish menu na te maken. Ik heb deze recentelijk ook gebruikt en hij werkt helemaal goed crossbrowser. Misschien moet je eens kijken op http://www.alistapart.com/articles/dropdowns voor de manier waar hun het mee oplossen.

Het enige wat zij anders hebben (op wat margins en background-images na) is dat zij een position: relative voor de <li> elementen opgeven. Als ik dat doe, komt er helemaal geen menu meer bij een hover.

[cyberstalker]

*bump*

[Rowanov]

Wat nou bump? Crisp heeft toch vrij duidelijk aangegeven dat een groot gedeelte van je probleem bij het absolute positioneren van je container/alles ligt. Je hoeft helemaal niets absoluut te positioneren met jouw layout, los van het menu dan. (Of je met nodig je testcase updaten )

Ik raad je aan je css van scratch nog een keer te doen en alles wat al prima in de flow staat er niet met absolute positioning uit te sleuren. Deze layout is toch echt niet zo vreselijk ingewikkeld.

cyberstalker schreef op zondag 04 juni 2006 @ 14:04:
Extra elementen met clear, e.d. heb ik al geprobeerd, zonder enig resultaat.

Clear heeft vrij weinig nut op absoluut gepositioneerde elementen

[ Voor 3% gewijzigd door Rowanov op 11-06-2006 10:03 ]

[cyberstalker]

Uiteraard heb ik ook al de absolute positioning van de container afgehaald, zoals in een eerder post aangegeven, dus daar zit het probleem niet (meer) in.

Het probleem lijkt eerder te zitten bij het clearen van floats. Ik probeer nu om de hele CSS van scratch op te bouwen. Hierbij loop ik direct tegen een probleem aan. Om een horizontaal menu te krijgen float ik <li> elementen. Het laatste element geef ik dan een clear: right, zodat er geen elementen meer naast gaan zitten, maar zonder resultaat.

Ik heb de testcase bijgewerkt. Er is op die pagina helemaal niets absoluut gepositioneerd, dus ik begrijp niet waar het probleem in kan zitten.

[orf]

Die extentie .xhtml is niet zo handig als de webserver dat niet als html herkend.
Edit: application/xhtml+xml in IE, niks gezegd.

[ Voor 26% gewijzigd door orf op 11-06-2006 12:41 ]

[cyberstalker]

orf schreef op zondag 11 juni 2006 @ 12:38:
Die extentie .xhtml is niet zo handig als de webserver dat niet als html herkend.

Dat wordt gelukkig prima herkend als application/xhtml+xml

[Rowanov]

cyberstalker schreef op zondag 11 juni 2006 @ 11:38:
Uiteraard heb ik ook al de absolute positioning van de container afgehaald, zoals in een eerder post aangegeven, dus daar zit het probleem niet (meer) in.

Het probleem lijkt eerder te zitten bij het clearen van floats. Ik probeer nu om de hele CSS van scratch op te bouwen. Hierbij loop ik direct tegen een probleem aan. Om een horizontaal menu te krijgen float ik <li> elementen. Het laatste element geef ik dan een clear: right, zodat er geen elementen meer naast gaan zitten, maar zonder resultaat.

Geef de ul/ol een clear: right