iframe shimming or ie6 (and below) select z-index bug

Question

uhm im not sure if anyone has encountered this problem
a brief description is on IE6 any <select> objects get displayed over any other item, even div's... meaning if you have a fancy javascript effect that displays a div that's supposed to be on top of everything (e.g: lightbox, multibox etc..) onclick of a certain element and that div overlaps a <select> your div get's to be displayed as if its under the <select> [on this case a max and minimum z-index doesnt work ]

i've tried googling and found the iframe shim solution
but i wanted some pretty clean alternatives or better yet has anyone found a better solution? since the method using iframes uses around 130mb of ram might slow down poor people's machines

Answer 1

hehe this problem only persists in IE6 and below anyway hmmm yah, it uses up 50MB more when that iframe becomes visible to the browser checked it from task manager's processes

anyway another reason i've found for finding alternatives are this iframe shim doesnt work with div's generated dynamically through DOM sad i think nobody really bothers

Answer 2

Prior to IE7 the drop down list was a "windowed" control meaning that it was rendered as a control directly by Windows rather than the browser synthesizing it. As such, it wasn't possible for it to support z-indexing against other synthesized controls.

In order to appear over a DDL, you must use another windowed control, like IFRAME. You can also use a little known IE-only feature called window.createPopup() which essentially makes a chromeless popup. It has limitations, like unstoppable click-out, but they are actually kinda helpful if you are building a hover menu system.

Answer 3

There is a plugin for jquery called bgiframe that makes the iframe method quite easy to implement.

Personally, as a web developer, I'm to the point where I no longer care about the user experience in IE6. I'll make it render as close to "correct" as possible, and make sure it's functional, but as far as speed goes, too bad. They can upgrade. IE7 (though still quite slow, compared to every other browser) has been out for 2 years (almost to the day!). IE8 is going to be out shortly. Firefox is available for every platform. Safari is also an option (and super fast). Opera is available for most/every platform.

IE6 was released in over 7 years ago. IMHO, there is no reason to still be using it, other than lazy users and incompetent IT departments (or if you're a web developer).

Answer 4

well we just checked our google analytics and found out that 30%of our visitors use IE6 so i couldnt just drop them out so easily
okei following your opinions i decided to go with the graceful degradation for IE using the method that removes items that would be overlapped by any popping divs

Answer 5

you don't have to hide every select using a loop. all you need is a CSS rule like:

* html .hideSelects select { visibility: hidden; }

And JS:

//hide:
document.body.className +=' hideSelects'

//show:
document.body.className = document.body.className.replace(' hideSelects', '');

(or use your favourite addClass / removeClass implementation).

Answer 6

There's also the activex method, which I'm starting to explore. It requires creating conditional code to use an activex control instead of a select box for ie6. There's a demo script showing the technique, which is discussed in more detail here.

Update: it appears that MS Office is required for the active-x control to be on the user's machine. In theory, it might be possible to include that somewhere, somehow, but that's getting a lot messier.

Answer 7

in case anyone is interested, here's some IE shimming code.

* html .shimmed {
    _azimuth: expression(
        this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);position:absolute;top:0px;left:0px;width:100%;height:100%" frameBorder=0 scrolling=no src="javascript:false;document.write('+"''"+');"></iframe>'),
        'inherit');
}

ref: this gist by subtleGradient and this post by Zach Leatherman

Answer 8

The simplest and most elegant solution to that annoying IE bug is found at: http://docs.jquery.com/Plugins/bgiframe using jQuery.

I reached that conclusion after trying for 2 days to make it work with WebSphere Portal / Portal Applications where everything is dynamic, including the fly-over menu.