z-index of div problem

D

Daan

On the same page where I have trouble with the menu (see my previous
post), I have a little trouble getting the behaviour of one of the
divs the same between different browsers. On the page <http://
wwwhome.cs.utwente.nl/~stolp/tq/>, there is a div with id "wolken".
This should show a div containing a picture (of clouds, which is the
translation of the Dutch word "wolken"). This works fine in Safari,
but in Firefox, the div won't show. I have tried setting the z-index
property of various elements on the page, but I can't seem to get it
working. Either it won't show at all, or it fall OVER the content and
menu araes, which is not what it is supposed to do.

Any suggestions on how to fix this or a possible workaround? Thanks!
 
B

Ben C

On the same page where I have trouble with the menu (see my previous
post), I have a little trouble getting the behaviour of one of the
divs the same between different browsers. On the page <http://
wwwhome.cs.utwente.nl/~stolp/tq/>, there is a div with id "wolken".
This should show a div containing a picture (of clouds, which is the
translation of the Dutch word "wolken"). This works fine in Safari,
but in Firefox, the div won't show. I have tried setting the z-index
property of various elements on the page, but I can't seem to get it
working. Either it won't show at all, or it fall OVER the content and
menu araes, which is not what it is supposed to do.

Any suggestions on how to fix this or a possible workaround? Thanks!
Click to expand...

This is a problem I've seen before with Firefox. It doesn't seem to have
much clue where the root stacking context is. It can be avoided by
creating a new "root" stacking context manually.

Add 'style="position: relative; z-index: 0"' to <body> to get the
clouds. Or if adding things on body gives problems in other browsers,
just wrap everything inside body in another div (with position:
relative; z-index: 0).
 
D

Daan

This is a problem I've seen before with Firefox. It doesn't seem to have
much clue where the root stacking context is. It can be avoided by
creating a new "root" stacking context manually.

Add 'style="position: relative; z-index: 0"' to <body> to get the
clouds. Or if adding things on body gives problems in other browsers,
just wrap everything inside body in another div (with position:
relative; z-index: 0).
Click to expand...

That did the trick, thank you very much!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Z-Index/Drop-down menu issues 2
JS querySelector addEventListenerer index getElementsByClassName parent div only 1
Z-Index not working correctly 0
How can I get my menu inside of a menu to function properly? 1
z-index not positioning properly? 0
Creating a direct download div link for pdf file 3
z-index query 10
CSS - z-Index problem with borders! 3

Members online

Total: 33 (members: 1, guests: 32)
Robots: 644

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top