Cute solutions and something else...

Internet Explorer's SELECT element vs DOM sandwich

Published Monday, March 20, 2006 by Роман Рахман.

If you are a web developer and use absolutely positioned layers in your HTML pages I guess you’ve ever come across the situation when SELECT element ignored z-index property and was rendered above the rest of element. I think this is the ugliest problem of Internet Explorer 6-. I read it was fixed in the IE 7 beta 2 but this build will be popular much later.

Actually I know a couple of workarounds for this problem.

1) Just hide SELECTs when DIV appears above them.
JavaScript Calendar by Mihai Bazon



Just in case, incorrect behavior of years and months drop-down lists:

If you use this method don’t forget ­to use visibility:hidden instead of display:none.
Do you know why?

2) Replace drop-down SELECTs by INPUT[type=text]



Respect. Very smart, but script does it in Mozilla/Firefox as well. It isn’t necessary in non-IE browsers.

And I use my own solution. I know it’s not original and I saw a few sites use the same method. Look at drop-down "Address book" on Singlescrowd Dating Portal

How does it work? We use DOM sandwich from DIV and IFRAME. IFRAME is an element which could be rendered above the SELECT

This window-like UI element is based on library layer.js.
All layers are instances of Layer Object which has a special method for preventing wrong rendering of SELECT tag. Even transparent IFRAME could cover SELECT, it’s really amazing.

Layer.prototype.fixIEListboxBug = function _Layer_fixIEListboxBug() {  
    if(document.all && !window.opera) {  
        var content = this.div.innerHTML;  
        this.div.innerHTML = '<iframe frameborder="0" style="position:absolute; left:0; top:0; width:100%; height:100%; margin:0; padding:0; background:transparent; filter:alpha(opacity=0);"></iframe>';  
        this.iframe = this.div.firstChild;  
        child = document.createElement('DIV');  
        this.div.appendChild(child);  = 'absolute';  = '0px';  = '0px';  = '100%';  = '100%';  
        child.innerHTML = content;  
        child.className = this.div.className;  
        this.div.className = '';  
        return child;  
    else {  
        return this.div;  

0 Responses to “Internet Explorer's SELECT element vs DOM sandwich”

Leave a Reply

About me

  • I'm Роман Рахман
  • From Донецк, Ukraine
  • My profile