Search code examples
javascriptinternet-explorer-6shim

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


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


Solution

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