Internet explorer 6 Z-index problem

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

I had this problem too. The only way I know to fix is to hide all selects in your page. Then show they again when popup closes.

---

EDIT

I suggest you use jquery, but if you don't want, here goes 100% javascript solution (without jquery)

See my code in jsfiddle.

JS

var d = document;
function showPopup(){
    d.getElementById("popup").style.display = "block";
    updateSelects(d.getElementsByTagName("select"), "none");
}
function hidePopup(){
    d.getElementById("popup").style.display  = "none";
    updateSelects(d.getElementsByTagName("select"),  "inline");
}

function updateSelects(itens, value){
    for (i=0; i < itens.length;  i++) {
        itens[i].style.display = value;    
    }    
}

HTML

<select>
    <option>one</option>
    <option>two</option>    
</select>

<input type="button" onclick="showPopup()" value="show"/>

<div id="popup">
    This is my popup
    <input  type="button" onclick="hidePopup()" value="hide"/>
</div>

Answer 2

If you wouldn't mind adding some jQuery to your project, as there is a jQuery plugin specifically designed to circumvent this problem: http://docs.jquery.com/Plugins/bgiframe. You just call the function on the elements you want to fix and it applies the iframe hack to them for you.

More info; http://brandonaaron.net/code/bgiframe/docs

Answer 3

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: http://stackoverflow.com/questions/224471/iframe-shimming-or-ie6-and-below-select-z-index-bug

Answer 4

select elements and iframes appear over top of everything in IE. You'll need to use an iframe to counter-act the dropdowns.

http://plugins.jquery.com/project/bgiframe