21 July, 2006 / IE6, SELECT and Z-index Problem Resolution

6 comments

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.

6 Comments:

At July 21, 2006 4:48 PM, Anonymous Anonymous said...

That's the nice one!
I used to use a separate iframe for every div on my page that overlaps with a select.
Having one iframe covering the entire screen area is much more elegant :-)

 
At August 01, 2006 1:42 AM, Blogger k7k0 said...

The rule filter:mask() is making consume IE6 30+MB!!! Tested in 6.0.3790. The original link consumes around 130 MB of RAM. There's any workaround to stop IE making this?

 
At August 07, 2006 6:28 PM, Anonymous Michael V. said...

I have it working without filter:mask().
The memory consumption is probablly due to the size of this iframe.
I dinamically set the size and the location of the iframe to the size and the location of the div when I need to display it.

 
At August 17, 2007 6:48 PM, Blogger Rajesh said...

i cant get it to work with css styles and the sample html code you have posted here.

can you give a simple working html sample that one drop down list and uses the styles you have mentioned. i am unclear on the order in which you have to put the divs and the iframes.

thanks

 
At July 22, 2008 4:11 AM, Anonymous Dajve said...

Massive thanks for this - you've saved my skin on a project where the client is using IE6 + Win2000 and there's no way to get them to change!
Seeing as I know the exact size of the overlaid div, setting the containing div and iframe to those dimensions doesn't seem to cause any memory problems for me =o)

Cheers again,
Dajve

 
At January 12, 2009 6:17 PM, Blogger vivian said...

This is a great solution, but filter:mask() breaks css validation. Is there perhaps an alternative?

 

Post a Comment

Links to this post:

Create a Link

<< Home

 

We are developing TargetProcess agile project management software and blogging about our progress.

Subscribe to the RSS feed
Stay tuned by having the latest updates via RSS
Follow TargetProcess on Twitter
Get in touch with our team

Try TargetProcess
TargetProcess quick tour