Ie 6 & Ie 7 Z-Index Problem

IE 6 & IE 7 Z-Index Problem

Agree with validator comment - validating usually helps. But, if it doesn't heres a few pointers for z-index in IE:

1) elements who's z-index you're manipulating should be on the same level ie. you should be setting the z-index of #bottom and #body

if this is not feasible then

2) IE sometimes wont apply the z-index correctly unless the elements ou are applying it to have a position:relative. Try applying that property to #bottom and #body (or #signpost)

let me know how that works out

Darko

z-index issue in Internet explorer 7

z-index only work with position relative, absolute & fixed. So, Give position:relative to your #submenu. Write like this:

#sub-menu {
 position:relative;
 z-index: 1000;
}

IE 7 Z-Index and IE6 Fixed Positioning

Try the zindex fix http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

Z-index does not work in ie

If you have a full page wrapper div anywhere or can make one or there is an ancestor/parent div you can freely alter,...

Explicitly state position: relative; or position: absolute; and either way also set z-index: 0; or the lowest value you can use.

Also some browsers (especially some IEs) allow a smaller range of z-index.

For sure values between 1 and 100 are safe. Probably more like 1-255 but I vaguely recall some old issue,...

Order in Internet Explorer

It looks like you might be dealing with a known bug:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.”

You can see the bug report on Quirksmode website and a workaround explained in this blog post.

Essentially what you have to do is wrap it in an element with higher Z-index, for example
Here is a quick sketch of a workaround:

<div style="position: relative; z-index: 3000">
    <div style="position:absolute;z-index:1000;">
        ...
    </div>
</div>

z-index issue internet explorer compatibility mode and 7

A parent element that contains the menu list that has the position: relative set on it needs to have a z-index higher than that of the body. z-index also works on a top down basis in that elements that are declared after the menu have a higher z-index than the elements before them.

tl;dr..

Set the menu to have a higher element than the content

(example with inline styles)

<body>
    <div class="header">
    ...
    </div>
    <div class="nav" style="position:relative; z-index: 2">
        <ul>
           <li>
               Blah
               <ul class="drop-menu">
                   <li>drop item</li>
               </ul>
           </li>
        </ul>
    </div>
    <div class="content" style="position:relative; z-index:1">
        ...
    </div>
</body>

Ie 6 & Ie 7 Z-Index Problem