[CSS] absoluut gepositioneerde div niet zichtbaar in FF

[netiul]

Ik heb een container div twee dingen bevat:

• een <ul><li> serie die mbv css een horizontaal menu genereert.
• een div die mbv css absoluut gepositioneerd is achter de <ul><li> menu.

HTML:

    <div id="menubar">
      <div></div>
      <ul>
        <li class="active"><a href="index.html">home</a></li>
        <li><a href="index.html">weblog</a></li>
        <li><a href="index.html">tab3</a></li>
        <li><a href="index.html">werk</a></li>
        <li><a href="index.html">tab5</a></li>
        <li><a href="index.html">tab6</a></li>
        <li><a href="index.html">gastenboek</a></li>
        <li><a href="index.html">contact</a></li>
      </ul>
    </div>

Cascading Stylesheet:

#header #menubar {
    position: absolute;
    left: 0;
    bottom: 0;    
    height: 40px;
    width: 100%;    
}

#header #menubar div {
    position: absolute;
    left: 0;
    top: 5px;
    width: 75%;
    height: 35px;
    background: #130;
    z-index: -1;
}

#header #menubar ul {
    margin: 0;
    padding: 0;
    padding-left: 5px;
    list-style: none;
    background: red;
}

#header #menubar ul li {
    float: left;
    height: 26px;
    padding: 13px 13px 0px 13px;
    margin: 0 2px 0 0;
    background: red;
}

#header #menubar ul li.active {
    background-color: #fff;
    border-top: 1px solid #002;
    border-left: 1px solid #002;
    border-right: 1px solid #002;
}

Zoals je ziet is de div binnen div-menubar d.m.v z-index:-1 achter de <ul><li> geplaatst. M.i. zou dit moeten werken, maar vreemd genoeg werkt dit niet in Firefox, maar wel in IE.

Zie deze twee screenshots voor een duidelijker beeld van het probleem. Ik heb de boel even gek gekleurd om het duidelijk te maken.
Firefox:

IE:


Pas ik deze techniek soms verkeerd toe?

[Verwijderd]

Welke IE-versie is dat? Het lijkt me namelijk dat IE de z-index hier verkeerd toepast. Alle elementen met een negatieve z-index dienen namelijk áchter alle andere elementen geplaatst te worden, zoals in Firefox dan ook netjes gebeurd.

Ik denk dat je de z-index op je div weg moet halen en position: relative; op de ul moet zetten. Misschien ook nog een positieve z-index op de ul, maar dat is wellicht niet eens nodig.

Leesvoer: http://www.smashingmagazi...rty-a-comprehensive-look/

[netiul]

Achter welk element zou Firefox die div moeten laten verdwijnen? Dat is nou het punt... Het enige andere wat zich binnen dezelfde container-div bevind is de <ul>. En dat doet IE prima.

Ik neem aan dat een child-div zich niet achter de parent-div kan verbergen.

[Verwijderd]

En dat is dus een verkeerde aanname.

[netiul]

De oplossing bevestigd in ieder geval niet jouw bewering dat die aanname verkeerd is. Ik heb hem wel gevonden dankzij jouw link, dank daarvoor

De oplossing is dat zowel het element wat achter het andere element wordt geplaatst d.m.v. z-index: -1 als het element waarachter het geplaatst wordt beiden of absoluut of relatief of gefixeerd gepositioneerd moet zijn. Zolang één van beide de position-property mist, werkt het niet (in FF).

[Bosmonster]

Volgens mij komt met z-index -1 iets zelfs achter je body terecht (met achtergrondkleur zie je dat dus niet), aangezien die standaard position: relative heeft met z-index 0 als ik me niet vergis.

Als je dus geen position hebt op het bovenliggende element wordt dat niet gerelativeerd. Lijkt me dus gewoon juist wat Firefox doet.

[noes]

Bosmonster schreef op woensdag 13 oktober 2010 @ 11:28:
Volgens mij komt met z-index -1 iets zelfs achter je body terecht (met achtergrondkleur zie je dat dus niet), aangezien die standaard position: relative heeft met z-index 0 als ik me niet vergis.

Als je dus geen position hebt op het bovenliggende element wordt dat niet gerelativeerd. Lijkt me dus gewoon juist wat Firefox doet.

Klopt, volgens W3C spec is het niet nuttig (misschien zelfs niet mogelijk) om een negatieve Z-index te gebruiken: je plaatst elementen achter de body en html elementen. Wat je eventueel kan doen als je vooral elementen ergens achter wil plaatsen, alles een z-index geven van 500.

code:

* {
    z-index: 500;
}

zodoende kan je het bereik van 501 t/m 999 gebruiken voor overlays en het bereik van 0 - 499 gebruiken voor underlays.

Succes!

[netiul]

Helder! Dank!

[LinkinTED]

Houd er ook rekening mee dat FF lege elementen niet weergeeft.

Verander

code:

<div></div>

In

code:

<div>&nbsp;</div>

[crisp]

LinkinTED schreef op vrijdag 15 oktober 2010 @ 08:26:
Houd er ook rekening mee dat FF lege elementen niet weergeeft.

que?

[netiul]

LinkinTED schreef op vrijdag 15 oktober 2010 @ 08:26:
Houd er ook rekening mee dat FF lege elementen niet weergeeft.

Werkt prima in FF hoor...

[Flying Bobman]

LinkinTED schreef op vrijdag 15 oktober 2010 @ 08:26:
Houd er ook rekening mee dat FF lege elementen niet weergeeft.

Verander

code:

<div></div>

In

code:

<div>&nbsp;</div>

Voor IE6 is het nodig om er 'iets' in te zetten. De elementen vallen dan niet weg maar doen vaak niet wat je wilt... Ik zet er altijd <!-- IE --> in als er voor de rest niets in zit. Als je alles op je website selecteert zie je dan tenminste niet overal van die blokjes geselecteerde spaties
@crisp
Ik had het een keer met een div die ik als 3px horizontale lijn wou hebben in mijn ontwerp, IE6 vulde die div tot iets van 20px minimaal. Met spatie werd het minder mits je de tekstgrootte in die div verkleinde, maar het beste is om in in kleine divs die een vaste grootte moeten hebben '<!-- -->' neer te zetten, anders zet IE6 er dus 'spooktekst' in die de grootte verandert.
@bosmonster
Met html en css zijn er inderdaad 1000 wegen naar Rome Deze oplossing heb ik indertijd na wat Googlen gevonden, en heet de whitespace bug volgens mij, maar daar kan ik ook naast zitten want inmiddels ben ik toch heel wat IE6 bugs tegengekomen...

[ Voor 38% gewijzigd door Flying Bobman op 19-10-2010 18:51 ]

[crisp]

Flying Bobman schreef op dinsdag 19 oktober 2010 @ 18:22:
[...]

Voor IE6 is het nodig om er 'iets' in te zetten. De elementen vallen dan niet weg maar doen vaak niet wat je wilt... Ik zet er altijd <!-- IE --> in als er voor de rest niets in zit. Als je alles op je website selecteert zie je dan tenminste niet overal van die blokjes geselecteerde spaties

Dat gedrag ken ik alleen van tabel-cellen waar IE dan de borders niet rendered (en empty-cells:show niet kent)...

[Bosmonster]

Flying Bobman schreef op dinsdag 19 oktober 2010 @ 18:22:
[...]

Voor IE6 is het nodig om er 'iets' in te zetten. De elementen vallen dan niet weg maar doen vaak niet wat je wilt... Ik zet er altijd <!-- IE --> in als er voor de rest niets in zit. Als je alles op je website selecteert zie je dan tenminste niet overal van die blokjes geselecteerde spaties
@crisp
Ik had het een keer met een div die ik als 3px horizontale lijn wou hebben in mijn ontwerp, IE6 vulde die div tot iets van 20px minimaal. Met spatie werd het minder mits je de tekstgrootte in die div verkleinde, maar het beste is om in in kleine divs die een vaste grootte moeten hebben '<!-- -->' neer te zetten, anders zet IE6 er dus 'spooktekst' in die de grootte verandert.

overflow: hidden had dat ook voor je opgelost.