z-index of div problem

Discussion in 'HTML' started by Daan, Jun 19, 2007.

  1. Daan

    Daan Guest

    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!
     
    Daan, Jun 19, 2007
    #1
    1. Advertising

  2. Daan

    Andy Dingley Guest

    On 19 Jun, 11:45, Daan <> wrote:

    > Any suggestions


    Post a URL
     
    Andy Dingley, Jun 19, 2007
    #2
    1. Advertising

  3. Daan

    Daan Guest

    Daan, Jun 19, 2007
    #3
  4. Daan

    Ben C Guest

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


    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).
     
    Ben C, Jun 19, 2007
    #4
  5. Daan

    Daan Guest

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

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


    That did the trick, thank you very much!
     
    Daan, Jun 19, 2007
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. karthikeyavenkat
    Replies:
    2
    Views:
    669
    Bryce
    Mar 17, 2005
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    807
  3. Tomasz Chmielewski

    sorting index-15, index-9, index-110 "the human way"?

    Tomasz Chmielewski, Mar 4, 2008, in forum: Perl Misc
    Replies:
    4
    Views:
    355
    Tomasz Chmielewski
    Mar 4, 2008
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    235
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    356
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page