Home/ Questions/Q 233095
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T20:04:20+00:00

This is giving me such a headache. I am having problems in IE (6/7)

  • 0

This is giving me such a headache. I am having problems in IE (6/7) with the code below.

I have a number of container items on a page which are relatively positioned. Inside one of them is a absolutely positioned item. This inside item should appear OVER any of the container items. This appears correctly in Safari and Firefox but not in IE.

I have included a very pared down example of this for you to see. I can not remove the position: relative; on container or position: absolute; on the inside item because this will eventually be an html dropdown item.

Thanks so much for your help.

Preview here.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link href="http://www.louiswalch.com/common/css/reset.css" type="text/css" rel="stylesheet">
    <style type="text/css">     

        BODY { padding: 20px; }

        .item {
            margin-bottom: 5px;
            padding: 5px;
            background-color: orange;       
            position: relative;
            float: left;
            width: 300px;
            }

            .item .display {
                background-color: red;
                }

            .item .inside {
                padding: 5px;
                background-color: yellow;
                position: absolute;
                top: 23px;
                left: 10px;
                width: 100%;
                z-index: 5000;
                }           

        .clear { clear: both; }

    </style>
</head>
<body>
    <div class="item">
        <div class="display">Item</div>
    </div>
    <div class="clear"></div>

    <div class="item">
        <div class="display">Item (Open)</div>
        <div class="inside">This is inside<br/>more<br/>more</div>
    </div>
    <div class="clear"></div>

    <div class="item">
        <div class="display">Item</div>
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In IE, you can’t have a div with a higher z-index than its container so if you want to make the “inside” element pop out above other divs then its container must be above those elements as well (not sure what the standard is, but the IE way does seem to make more sense, logically speaking).

    In your example, do this…

    <div class="item" style="z-index:5000">
            <div class="display">Item (Open)</div>
            <div class="inside">This is inside<br/>more<br/>more</div>
    </div>

    ….and your menu will now be above the bottom item like it does in FF.

    Ideally, you’ll want to just create a style called “itemOpen” or something that has that z-index property set up like this but even the style attribute will do the trick.

    • 0