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

Question

Uhm I'm 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 it's under the <select> [on this case a max and minimum z-index doesn't 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

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