Ie7 Z-Index Issue - Context Menu

IE7 Z-Index issue - Context Menu

I have resolved this by changing the element ordering. I have removed the relative position element from containing both my button and menu, and made it only the parent of menu.

    <div class="control-action" style="float:right"> 
        <div class="control-action-menu">
            <ul style="display:none">
                <li class="action-remove">Remove</li>
                <li class="action-detail">Detail</li>
                <li class="action-assigned">Assign</li>
            </ul>
        </div>
        <button>Action</button> 
    </div>

With this markup change the css has changed into the following:

.control-action
{
    text-align:right;
    width:100px;    
}

.control-action-menu
{
    position:relative;
    z-index:1;
}

.control-action ul
{
    position:absolute;
    z-index: 10000;
    list-style:none;
}

IE7 Z-Index Layering Issues

Z-index is not an absolute measurement. It is possible for an element with z-index: 1000 to be behind an element with z-index: 1 - as long as the respective elements belong to different stacking contexts.

When you specify z-index, you're specifying it relative to other elements in the same stacking context, and although the CSS spec's paragraph on Z-index says a new stacking context is only created for positioned content with a z-index other than auto (meaning your entire document should be a single stacking context), you did construct a positioned span: unfortunately IE7 interprets positioned content without z-index this as a new stacking context.

In short, try adding this CSS:

#envelope-1 {position:relative; z-index:1;}

or redesign the document such that your spans don't have position:relative any longer:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

See http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ for a similar example of this bug. The reason giving a parent element (envelope-1 in your example) a higher z-index works is because then all children of envelope-1 (including the menu) will overlap all siblings of envelope-1 (specifically, envelope-2).

Although z-index lets you explicitly define how things overlap, even without z-index the layering order is well defined. Finally, IE6 has an additional bug that causes selectboxes and iframes to float on top of everything else.

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

IE 7 z-index issue on Nav Dropdowns

Your page is being forced into "IE7 Mode". Check the HTTP response headers returned by your page:

HTTP/1.1 200 OK
..
X-UA-Compatible: IE=EmulateIE7
..

You can easily fix your problem in IE8/9 by removing that HTTP header.

If that's not an option, or you need to support genuine IE7..

On .menu-main-container, add position: relative; z-index: 51.

If you'd like more information about this IE6/7 bug, see: IE7 Z-Index issue - Context Menu

Z-index problem on IE7

The problem is with stacking contexts. Basically the #menu li elements on which you have set a z-index (to 9) are not in the same stacking context as the #slider element (on which you have set z-index to 1). A quick solution would be to set the z-index of your #header element to 2, however I'd recommend reading up on stacking contexts.

IE7 CSS z-index issue not apparent on any other browser

This boiled down to a stacking context issue that was only apparent, as many have found, with Internet Explorer 7.

I decided to remove the problematic behaviour for IE7 only, as i'm a believer that an application does not need to look the same in every browser.

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 in ie7 with fixed header element and transparency

In IE7 an element is trapped by its positioned parent and cannot escape. One cannot interweave the children of positioned parents because ie7 and 6 incorrectly apply a z-index of zero to positioned elements when they should have applied auto.

There is no way to escape this other than not positioning the parent which my case is not possible because I want it fixed.

So I'll need to change the design and apply the gradient to another element and not the 100% high fixed element. That will allow the header to be separate form the content and then the content can go under the header.

Ie7 Z-Index Issue - Context Menu