Firefox z-index trouble is driving my Super Mario mad...

Discussion in 'CSS' started by PapaSmurf, Mar 3, 2009.

  1. #1
    I've been trying to solve this problem for already 2 days and still no results so I'd really appreciate any kind helpful advices or solutions...

    take a look at this web page in IE, Chrome and Firefox

    http://www.igre24.net/igra-4

    it displays fine in IE7 and Chrome but Firefox won't let my Super Mario (footer) under " #cijeli_dio_ispod_uputa " layer. Other layers "allow" my super mario to take his place under them. that's why a part of it hangs below the footer (in firefox only). i assume this has to be some kind of z-index trouble.

    here's another page that might help in finding the solution... (super mario is displayed fine there... even in firefox...)
    http://www.igre24.net/mahjong

    and i really don't know the reason, since IE and chrome obviously do not have any troubles with this...

    is there any css guru here to give me a hand with this? i'd be extremely grateful.

    thanks in advance
     
    PapaSmurf, Mar 3, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    Without looking, the element has to be positioned to work.
     
    drhowarddrfine, Mar 3, 2009 IP
  3. PapaSmurf

    PapaSmurf Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    yep, i know that. I've positioned it relatively, and that's why it works in ie and chrome. but this firefox trouble remains a mistery to me.
     
    PapaSmurf, Mar 3, 2009 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    Hm. z-index works fine in FF but I need to find the time to look. Maybe later tonight.
     
    drhowarddrfine, Mar 3, 2009 IP
  5. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #5
    Ack! It works in Chrome, too? I'm not on Windows so I can't check but the problem you have is a IE bug! Elements are never to expand to contain floated elements and that is what IE must be doing. Add 'overflow:auto' to the parent element and you'll see it expand like IEs bug. I only did it to one div but there must be more going on.

    I am really surprised if Chrome is doing the same thing.
     
    drhowarddrfine, Mar 3, 2009 IP
  6. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    from what i can see, the "cijeli_dio_ispod_uputa" div isn't tall enough for those two footers to be pushed all the way down to the bottom of the page. that's why it works on the other page, but not this one; the comments are making the height of the div tall enough. the simple fix, is to have a min-height of at least 400px, 420px to be safe, on the "cijeli_dio_ispod_uputa" div, *height: 420px for ie6 if you're developing for ie6 as well. i'll try to think up of something else if the height fix isn't good enough for you.
     
    rikun, Mar 3, 2009 IP