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

Solution 1:

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 the following JavaScript:

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

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

(Or, you can use your favourite addClass / removeClass implementation).

Solution 2:

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).

Solution 3:

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