IE6 Select Z-Index Bug: A Workaround

I’ve been using this flexible and easy to configure dhtml popup script on a client’s site for some time now, with great results. Today, however, I was setting up a new sale promotion on a page where the popup was to appear over top of a select dropdown.

A quick preview in IE6 revealed the dreaded select z-index bug. For those of you who aren’t familiar with this plague of the web developer, the gist of this bug is that in IE6, select and text area inputs ignore normal z-index positioning, which means that instead of tucking neatly behind absolutely-positioned elements with a higher z-index, they pop their little selves right out front and center, as shown below.
select input z-index bug shown in IE6

Clearly, this was not what the site owner intended. So, I went poking about for a decent workaround. I found plenty of references to iframes, but I wanted something cleaner that didn’t involve messing with the markup. Finally, I stumbled upon the brilliant suggestion of using a javascript show/hide function to hide the select element when it wasn’t wanted, and pop it back into view when it was.

The following simple function, added to the head tag, and called when the popup is called, solved the problem nicely.

function hide_select(myelement){
var select = document.getElementById('myelement');
if(select.style.visibility == "hidden")
{
select.style.visibility="visible"
}else{
select.style.visibility="hidden";
}
}

Simply replace YourIDHere in the code below with the id of the select element you need to cover up (you may have to add one if it doesn’t already exist) and then call the javascript function with your call to load the popup. In the case of my example, the popup loads from a body onload call, as follows:

<body onload="javascript:loadpopup();hide_select('YourIDHere');">

The result is a dhtml popup with no pesky select box poking its nose where it doesn’t belong.
dhtml popup without IE6 select bug

Finally, to restore the select box to visible when the popup was closed, I added the hide_select function to the link to close the popup, like so:

<a href='javascript:closeMyPopup();hide_select();'>X</a>
Be Sociable, Share!

2 Responses to “IE6 Select Z-Index Bug: A Workaround”

  1. Jatazoulja says:

    just saw your post. I was having same problem and I think hiding the select is way better than iframe (which will be depricated sooner or later) and if your using html 5 doctype.

    but I did it using jquery,

    function hide_select(id) {
    if($('#'+d+'').is(':visible')) {
    $('#'+d+'').css("visibility", "hidden");
    } else {
    $('#'+d+'').css("visibility", "visible");

    }

    }

    Thanks!

    Cheers!

  2. tom3k says:

    great way to deal with this nasty bug.

    thanks!!!

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>