Atom feed

21 July, 2006 / 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
</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.

5 Comments:

At 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 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 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 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 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

 

Post a Comment

Links to this post:

Create a Link

<< Home

 

We are developing new version of TargetProcess and blogging about our progress.

TP 2.0 online demo
TP 2.0 quick tour