tags:

views:

121

answers:

1

I've written a jQuery script to replace <select /> elements with some DIV's and UL's allowing my to simulate the original SELECT but also allow me to style it. So far, aside from a few minor bugs, it works rather nicely.

However, in Internet Explorer, the 'options' div is getting rendered underneath the elements below the div.

Here's the HTML:

<div class="styledSelect-parent" style="display: inline-block; width: 59px;">
   <div class="styledSelect-newSelect" style="position: relative;">
      <input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text">
      <div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;">
         <ul>
            <li>Test1</li>
            <li>Test2</li>
            <li>Test3</li>
            <li class="styledSelect-active">Test4</li>
            <li>Test1</li>
            <li>Test2</li>
         </ul>
      </div>
   </div>
</div>

<br /><br />

<div class="styledSelect-parent" style="display: inline-block; width: 59px;">
   <div class="styledSelect-newSelect" style="position: relative;">
      <input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text">
      <div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;">
         <ul>
            <li class="styledSelect-active">Test1</li>
            <li>Test2</li>
            <li>Test3</li>
         </ul>
      </div>
   </div>
</div>

If I open the first select, the LI list sits underneath the second select box rather than above it. I can't get the z-indexes to work properly.

What am I missing? :/

EDIT: I should point out the HTML is generated dynamically from jQuery. The full code can be found here.

+1  A: 

"In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly". http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

graphicdivine
The hack solution to this is to use an iframe shim underneath the element/block you're needing to 'float'. Mootools (and I believe jQuery) have a plugin to automate this.
Marc B