Question

I have a popup DIV (js triggered) which shows an image. Very simple.

The problem is, that this DIV must overlap the SELECTS which lie underneath the DIV.

It works in all browsers but IE6.

When the js is triggered, and the DIV is displayed, the z-index isn’t right because the SELECT drop lists overlap parts of the DIV.

This is only in IE6.

Anybody have a clue?

Here is the css for the div:

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

I have tried removing the zoom, and editing some of the css above without luck.

Why is this not working in IE6?

Thanks

Answer 1

If I can recall correctly it’s a fairly well known bug that IE6 ignores z-index for select elements, that is, it’s always in front of all other elements, regardless of their z-index.

The basic method is either to hide the select in question when you need something on top of it with Javascript, or overlay a iframe “shim” to hide it. See this question for more detail: iframe shimming or ie6 (and below) select z-index bug