Toon posts:

[CSS] absoluut gepositioneerde div niet zichtbaar in FF

Pagina: 1
Acties:

  • netiul
  • Registratie: december 2001
  • Laatst online: 15-09 10:21
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
    <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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#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?

  • JKP-Kipmans
  • Registratie: november 2003
  • Laatst online: 13-12-2013
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/ :)

If you do the cooking by the book, then you'll have a cake.


  • netiul
  • Registratie: december 2001
  • Laatst online: 15-09 10:21
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.

  • JKP-Kipmans
  • Registratie: november 2003
  • Laatst online: 13-12-2013
En dat is dus een verkeerde aanname.

If you do the cooking by the book, then you'll have a cake.


  • netiul
  • Registratie: december 2001
  • Laatst online: 15-09 10:21
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
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52

Bosmonster

*zucht*

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
  • Registratie: augustus 2006
  • Niet online

noes

gek op benzine.

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:
1
2
3
* {
    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!

2020 R1250RS, K26/R1200RT, E61/550i


  • netiul
  • Registratie: december 2001
  • Laatst online: 15-09 10:21
Helder! Dank!

  • LinkinTED
  • Registratie: juli 2010
  • Laatst online: 20:44
Houd er ook rekening mee dat FF lege elementen niet weergeeft.

Verander
code:
1
<div></div>

In
code:
1
<div>&nbsp;</div>

  • crisp
  • Registratie: februari 2000
  • Laatst online: 23:40

crisp

Devver

Pixelated

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

Intentionally left blank


  • netiul
  • Registratie: december 2001
  • Laatst online: 15-09 10:21
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
  • Registratie: november 2006
  • Laatst online: 21-05 17:09
LinkinTED schreef op vrijdag 15 oktober 2010 @ 08:26:
Houd er ook rekening mee dat FF lege elementen niet weergeeft.

Verander
code:
1
<div></div>

In
code:
1
<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
  • Registratie: februari 2000
  • Laatst online: 23:40

crisp

Devver

Pixelated

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)...

Intentionally left blank


  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52

Bosmonster

*zucht*

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.
Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee