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?

score 2 · Answer 1 · answered Jun 03 '11 at 15:38

2

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.

answered Jun 03 '11 at 15:38

albert

8,112
3
47
63

score 2 · Answer 2 · edited May 23 '17 at 12:04

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:

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.

score 2 · Accepted Answer · edited Jun 06 '11 at 09:13

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

You might want to fix `contol` to `control`. Also, if you ever post another question about IE7 z-index woes, please include a complete test page. It will make the question *far easier* to precisely answer. Anyway, I'm glad you got it sorted. — thirtydot, Jun 03 '11 at 16:43

score 0 · Answer 4 · edited May 23 '17 at 11:48

0

Could be the hasLayout bug.

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

edited May 23 '17 at 11:48

Community

1
1

answered Jun 03 '11 at 15:41

Jason Gennaro

34,535
8
65
86

IE7 Z-Index issue - Context Menu

4 Answers4

Linked