[dawnprofies]

hi all.

have a small website i've built for myself (protournews.info). still some IE6 & Safari bugs, but i am having an complete cross-browser problem with some z-indexed div's.

not sure if my method of coding "should" work - it does inside my own head.

have a #head div with z-index = 98. this header is position:fixed (hence the z-indexing). inside this head div are several div's.

#logo div is floated left with z-index = 99.
#menu div is floated right with z-index = 100.

it all views correctly in full screen, however when the screen res is less 600 and the 2 div's overlap, the #menu div is hidden BEHIND the #logo div irrespective of the #logo div's z-index of 100.

there are reason for the logic of my coding, but i'm sure there is a more "correct" manner of reaching the intended result. either way, i assumed the z-indexing attributes i have set would ensure the #menu div is the top layer..?

[Shiro]

Depends on the browser - different browsers render z-indexes differently.

[Spaced]

Random question, but do you have a 'position: relative' on everything you are using z-index on (besides the one you have 'position: fixed' on)? For me I've found if I don't sometimes z-index doesn't work right.

[dawnprofies]

thanks Spaced; you are correct.

i had neglected to declare positions on the floated div's, hence their failure to stack correctly.

AutisticCuckoo at SitePoint Forums also corrected me with the same reasoning ......

"The z-index property only applies to positioned elements, i.e., elements whose position property has one of the values absolute, fixed or relative.
Merely floating an element doesn't make it positioned, so z-index doesn't apply."