Z index issue with IE 7 and jqTransform

I have been struggling with a not so weird issue considering its the usual IE problem that z-index does not work with jqtranform elements.

If you visit the page http://interactweb.net/bwlll/home/registration.html in IE 7 and open the dropdown Its will fall below the underlying fields. 开发者_C百科Point to be noted is that the z-index of dropdown is higher than the text fields.

I have tested it on later version of IE in non-quirks mode and it works fine !

You just need to set the Z-index of your parent DIV. I had the same problem, here is the solution:

Wrong:

<div style="float:left; width:200px; ">
<form action="#" method="GET" id="sel_categorias">
    <select name="categorias" id="cat">
        <option value="1">1</option>
        <option value="2">2</option>      
    </select>
</form>
</div>

Correct:

<div style="float:left; width:200px; z-index:3000">
<form action="#" method="GET" id="sel_categorias">
    <select name="categorias" id="cat">
        <option value="1">1</option>
        <option value="2">2</option>      
    </select>
</form>
</div>

I've read you must use high z-index values to work in IE7. I always starting 3000, and it works.

Hope this helps someone in the future.

Many IE display bugs can be fixed with zoom: 1 in the css of the element. I think it's worth trying.

I've found only one solution for me: disable jqTransform select and display regular instead:

   /* In ie7.css */
   .jqTransformSelectWrapper div {display: none; }
   .jqTransformSelectWrapper select {display: block; }

Hope it will be useful.