z-index of div problem

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 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!

Re: z-index of div problem

On 19 Jun, 11:45, Daan wrote:

> Any suggestions

Post a URL

Re: z-index of div problem

On Jun 19, 1:13 pm, Andy Dingley wrote:
> On 19 Jun, 11:45, Daan wrote:
>
> > Any suggestions
>
> Post a URL

I did, but in case you missed it:

http://wwwhome.cs.utwente.nl/~stolp/tq/

Re: z-index of div problem

On 2007-06-19, Daan wrote:
> 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 > 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!

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

Re: z-index of div problem

On Jun 19, 2:57 pm, Ben C wrote:
> On 2007-06-19, Daan wrote:
>
> > 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 > > 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!
>
> 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 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).

That did the trick, thank you very much!