Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

sk3pt1c

sk3pt1c

macrumors 6502a
Original poster
Nov 29, 2005
918
6
a simulacrum
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?
 
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...
 
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! :)
 
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.
 
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?
 
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.
 
cromwell64 said:
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.
Click to expand...

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.
 
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...
 
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
 
...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 :)
 
sk3pt1c said:
...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 :)
Click to expand...

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
 
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?
 
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
 
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!!!
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back