IE6 Fail: Div underneath Multi Select Element

Question

Hello all,

I am making use of JQuery's autcomplete plugin. It works perfectly but in IE6, there are design issues.

I have a multi select tag underneath and when the autocomplete drops down the list of options its underneath the multi select tag! In all other browsers, this is fine but not in IE6.

What is the problem? This is the style that the div containing the an ordered list has.

element.style {
display:block;
left:384px;
position:absolute;
top:233px;
width:379px;
}
.ac_results {
background-color:white;
border:1px solid black;
overflow:hidden;
padding:0;
z-index:99999;
}

Here is my HTML:

<label for="field">Type Column Name</label>
<input type="text" id="field" size="50" value="">      <br /><br />

<div id="field_container" style="display:none">
<FORM style="width:400px"> 
<TABLE BORDER=0> 
<TR> 
    <TD> 
    <SELECT id="list2" NAME="list2" MULTIPLE SIZE=10 onDblClick="moveSelectedOptions(this.form['list2'],this.form['list1'],true,this.form['movepattern1'].value)"> 
    </SELECT> 
    </TD> 

    <TD ALIGN="CENTER" VALIGN="MIDDLE" style="vertical-align:middle"> 

    <button type="button" onClick="moveOptionUp(this.form['list2'])"><img src="../images/up.gif" alt="Up"></button>
    <br /><br />
    <button type="button" onClick="moveOptionDown(this.form['list2'])"><img src="../images/download.gif" alt="Down"></button> 
    </TD> 

</TR> 


</TABLE>
</FORM>

The div that contains the autocomplete option is not there to start with, it appears as the user starts typing into the text field field.

Thanks all for any help

Answer 1

Check out this: http://stackoverflow.com/questions/224471/iframe-shimming-or-ie6-and-below-select-z-index-bug