IE7 Z-Index issue - Context Menu

Question

I have the following button with associated context menu

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

When the button is clicked the associated ul shows beneath it as a context menu.

This is working great on all browsers except IE 7. In IE7 the context menu (ul) shows beneath the button below it. I imagine this is likely due to how the stacking context is resolving these elements.

My css currently looks like this:

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

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

Any ideas as to what I'm doing wrong?

Answer 1

IE up to IE7 uses the nearest positioned ancestor to determine the stacking context. You seeing that in IE6 too?

Put your button after the ul and then try it.

Answer 2

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;
}

Answer 3

IE7 has known bugs with z-index.

Without seeing your full page, the best I can do is point you to some resources which explain the issue:

• IE 6 & IE 7 Z-Index Problem
• IE7 Z-Index Layering Issues
• http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
• http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

The idea, in its most basic form, is to test adding/removing position: relative and z-index on parents of the problematic element until it's fixed.

Answer 4

Could be the hasLayout bug.

This may help: IE7 relative/absolute positioning bug with dynamically modified page content