Internet Explorer's SELECT element vs DOM sandwich 0
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
After:
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]
FogBugz
Before:
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); |
| child.style.position = 'absolute'; |
| child.style.left = '0px'; |
| child.style.top = '0px'; |
| child.style.width = '100%'; |
| child.style.height = '100%'; |
| child.innerHTML = content; |
| child.className = this.div.className; |
| this.div.className = ''; |
| return child; |
| } |
| else { |
| return this.div; |
| } |
| } |