negative z-index element not showing up on Windows! (?)

Discussion in 'Web Design and Development' started by sk3pt1c, Jul 12, 2008.

  1. sk3pt1c macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #1
    right, i have an element in a site i'm making with a z-index of -1 to place it so that the main content sort of overlaps with it.
    this is the page
    http://www.ithessalikigi.gr/test/home.html

    on my mac it shows properly with firefox and safari but not with camino

    on windows i can't see it at all, either with firefox or IE

    any ideas why this might be happening?
     
  2. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #2
    i've changed the content's z-index to 1 and removed the negative from the element i wanted to place under it and it now works on camino and firefox on windows but not on IE...
     
  3. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #3
    turns out it's an IE problem, it messes up with z-index
    IE8 beta works fine though, but i don't think that many people have it installed.
    anyone know a work around to make this work in IE6+7 ?
    come on people, help me out here! :)
     
  4. cromwell64 macrumors regular

    Joined:
    Jun 30, 2008
    #4
    set the z-index on the meteora div, it doesn't look like you have applied a z-index to it. then give the content div a higher z-index.
     
  5. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #5
    i've got the meteora div now with a -1 z-index and the content with a 1 z-index, but IE7 still won't show them properly... actually it doesn't even show the meteora image at all...
    :(
    any ideas?
     
  6. cromwell64 macrumors regular

    Joined:
    Jun 30, 2008
    #6
    set the one you want to be in the background to have a z-index of 1 and anything you want above it to 2 or something higher. negative z index values can cause problems. also, if the image is meant to be in the background, it might be better placing it as a background image in your stylesheet.
     
  7. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #7
    I agree, this is the best way. z-index is supposed to start at 1 as the bottom most layer and work its way up. Negative index is sort of a hack, and doesn't have consistent renderings, as you've discovered with IE.
     
  8. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #8
    the meteora pic is a bit offset from the content div, that's why i can't set it as its background or as the background of another div ;)
    also, i think z-index starts at 0, not 1 and as far as negative indexes are concerned, i've seen them used in loads of websites...
    either way, to give you the benefit of the doubt, i tried having the meteora as 1 and the content as 2 and it still doesn't show on IE ;)
    i've read that IE 6 & 7 have problems with z-index, so i probably need some sort of work-around...
     
  9. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #9
    The W3C specification for z-index value is it can be either auto, integer or inherit. Integers can be zero, but not negative unless explicitly noted in the specification which in this case it is not. Many (not all) browsers use unsigned-integer (long) for the datatype to meet this spec, i.e. 0,1,2...

    For future CSS3 implementations you might see browser developers change the type to (maybe) unsigned-long which permits negative integers, i.e. ...-2,-1,0,1,2...

    For now using a negative integer is indeed a hack as InLikeALion noted.

    -jim
     
  10. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #10
    ...which is why i tried using 1 for the lower and 2 for the higher div or further away and closer if you will... and it still didn't work :)
     
  11. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #11
    I'm slightly confused by that, but to clarify how z-index works, think of it like a deck of cards on a table, looking down. The card on the very bottom is 1, and the card on the very top is 52. 52 hides 51 and so on, down the stack. So the HIGHER the value, it is "on top" of those with lower values.

    This is restating what was said earlier, and thanks for noting you're using positive integers but in my examination of your style.css I found this:

    HTML:
    #container #meteora {
        float: right;
        position: absolute;
        top: 616px;
        left: 500px;
        z-index: -1;
    }
    Plus in your navbar.css:

    HTML:
    #MMMenuContainer0711171518_0 {
    /* This ID is related to the master menu div for menu MMMenuContainer0711171518_0 and contains the important positioning information for the menu as a whole */
        position:absolute;
        left:157px;
        top:57px;
        visibility:hidden;
        z-index:300;
    }
    
    So you might want to change that -1 in the style.css directive to 0 or higher and confirm you want the DreamWeaver menu to display "on top of all else" with that 300 value which seems to be the highest value on your site (when not hidden). I'm showing you the 300 so you know not to exceed that value if its set as you intend it to perform. It's okay to skip z-index values, i.e. assigning "1" to one element and "300" to another is fine, does not need to be "0" then "1" or in any sensible sequence. If only one overlap is to occur, make that element the 300 and simply don't assign z-index to anything else. But if multiple elements are involved and you want a specific sequence (remember, as if looking at cards from the top) assign z-indexes too all affected elements, top to bottom (highest to lowest).

    I'm just re-stating what others told ya, so this is my final reply. Hope this helps you. If not, I tried!!!

    -jim
     
  12. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #12
    thanks for the analysis, but the thing is the page you saw is a test page, i change values, test and then change it back to what worked in everything other than IE, which is what i have now.
    i have tried all positive values, i.e. 0 or 1 for the div i want lower in the 'deck' and 1,2,5,or 10 for the div i want above it.
    none of these seem to work on IE either.
    the 300 value for the navbar i hadn't noticed because it was automatically generated from fireworks, which is were i made the menu on, but i don't see how that might affect the other two elements?
     
  13. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #13
    right, one thing i hadn't done and didn't notice was position the "content" element, if you don't explicitly position them, then z-index doesn't work! :)
    we all missed that huh? :)
    anyway, i've positioned it as relative now and given it a z-index of 2.
    i've also given the "meteora" element a z-index of 1 so we don't have any issues with the negative values :)
    and guess what...
    it still doesn't show on internet explorer :D
     
  14. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #14
    man internet explorer blows big time, i had to position practically everything absolutely on the page for it to render it properly, it seems to be working now!!!
     
  15. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #15
    Did you ever tell us which version of IE you were struggling with? I'm just curious.
     
  16. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #16
    Indeed it was mentioned.
     

Share This Page