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

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
</div>
<!--[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.