Question

I have a div like this:

<div id="pop" class="pop_komm">
    <img src="Graphics/list_updated.gif">
    </div>

This is the css:

.pop_komm {
    position: absolute;
    z-index: 20;
    height: 52px;
    width: 208px;
    left: 660px;
    display:none;
    top: 247px;
    zoom:1;
}

The above divs style.display is set to “block” using javascript on a drop-down lists onChange event.

The “pop” div is displayed, and the image in it, but the problem is that the image is displayed behind the content. This only happens in IE6 (haven’t tested IE7 or 8 yet).
Other browsers display it fine.

The image is a transparent GIF, which I think might have something to do with it.
Any ideas how to solve this?

Thanks

Answer 1

IE does have some nasty issues with z-index.

The default value of the position style is position:static;. This value does not participate in z-index ordering, meaning that elements where you haven’t specified the position style may not be layered as you expect.

The solution is to add position:relative; to any elements that are mis-behaving – ie the elements that are being layered above the image.

Hope that helps.