IE6, SELECT and Z-index Problem Resolution | Targetprocess - Visual management software

13 years ago

IE6, SELECT and Z-index Problem Resolution

Yesterday we have found very tricky but workable solution for awkward IE bug. IE6 SELECT element doesn't support z-index, so if you have layer that covers drop down, the drop down will still be visible! Our first solution was to hide all drop downs on page using javascript when user clicks something and layer appear.

    function showOrHideAllDropDowns(newState) {

        var elements = document.documentElement.getElementsByTagName('select');

        for (var i=0; i<elements.length; i++) {
            elements[i].style.visibility = newState;

For example, when user clicks Add link, new layer appear and all drop downs disappear. This is somewhat confusing.

New solution is pure CSS and uses IFRAME, filter:mask() for IE rendering, z-index:-1 to hide IFRAME and other VERY clever tricks. It is required to use the following HTML code

<div class='toolTip selectFree' id='{0}'>
<div class='content'>
Something useful here
<!--[if lte IE 6.5]><iframe></iframe><![endif]--></div>

And CSS code

.selectFree {
  display: none;
  font: 10px Verdana;
  z-index: 2000;
  background : #C1DAF0;
  width: 200px

.selectFree IFRAME
 display:none;/*sorry for IE5*/
 display/**/:block;/*sorry for IE5*/
 position:absolute;/*must have*/
 top:0;/*must have*/
 left:0;/*must have*/
 z-index:-1;/*must have*/
 filter:mask();/*must have*/
 width:2000px;/*must have for any big value*/
 height:3000px/*must have for any big value*/;

To be honest, I've never seen more tricky solution in CSS world (and I've wrote many articles and two books on CSS!). But it works like a charm.

You can subscribe to our monthly newsletter here:

Thank you!

Сheck out latest blog posts:

Start your free trial

Enter your email
By clicking "Continue", you acknowledge and agree that we will process your personal data in accordance with our Service Privacy Policy and Terms of Service.

We’ve sent you a confirmation e-mail — please, go check it.

Or get a live
product demo