Jquery.selectbox-0.2 problem with ie7 - drop-down lists appearing behind elements instead of the front

Question

I use http://code.google.com/p/select-box/ to select the jquery plugin window to change the look of my selection boxes.

The plugin works fine and works fine, except in ie7, where drop-down lists appear behind any element they encounter. This seems to be a known issue, but no one seems to have answered the person who reported it.

I was wondering if anyone could suggest a fix?

the question can be seen here: http://code.google.com/p/select-box/issues/detail?id=8

thanks for any help :)

Answer 1

You can use this solution using this small piece of jquery code running on dom ready:

$(function() { var zIndexNumber = 1000; $('div').each(function() { $(this).css('zIndex', zIndexNumber); zIndexNumber -= 10; }); }); 

or try to fix the css zss indexing: http://web.enavu.com/snippets/fixing-the-ie7-z-index-issue-internet-explorer-7-z-index/

Working fiddle: http://jsfiddle.net/IrvinDominin/aTUC5/

Answer 2

This can also be solved by providing a higher z-index value for the drop-down div and a smaller z-index for each div that falls under it and displays the text.

Example:

 <div id="sbHolder_28376079" class="sbHolder" tabindex="0"> ... </div> <div class="div1"> <div class="div2"> <div class="div3"> </div> </div> </div> .sbHolder{z-index : 100;} .div1{z-index : 90;} .div2{z-index : 80;} .div3{z-index : 70;} 

This applies to the same logic that was mentioned above in js, but it violated my Ui in another part where absolute position and z-index were used.