Earlier on, Ben asked me how to get a div to show above a select box in IE6. Turns out that there’s a bug in IE which means that select controls will always show above divs, regardless of z-indexing. Anyway, after a bit of digging, I found a fix:
<!-- How to get a div to go over a select box in IE--> <!-- The general theory
is that an iframe needs to be placed in the same position as the div that
floats over the control. The iframe also needs to be included after every
other control, as IE 6 layers controls in the order they're declared. In this
case, I have a div (id="f1") I want to position at 0,0 and show on request. It
is styled in a way so that when the javascript function runs to show it, it
should appear over the select control. I also include an iframe which has the
same positioning and sizing properties as the div I want to show
(class="float"). The final piece of styling is to the z-index of the div to be
higher than the iframe, so that it appears above. Now the javascript method
simply shows both the iframe and the div, and the select box is hidden. Works
well in both FF and IE6, and on HTTPS sites. -->
<html>
<head>
<style>
.float {
top: 0;
left: 0;
width: 300px;
height: 50px;
display: none;
position: absolute;
background: white;
}
#f1 {
z-index: 3;
border: 1px solid blue;
}
iframe {
z-index: 1;
}
select {
border: 1px solid green;
} </style>
<script language="javascript"
type="text/javascript"> function showfloat() {
document.getElementById('f1').style.display = 'block';
document.getElementById('f2').style.display = 'block';
} </script>
</HEAD>
<BODY>
<div id="f1" class="float"> This is some testing text</div>
<FORM>
<select id="test">
<option value="1">Test item 1</option>
<option
value="2">Test item 2
</option>
<option value="3">Test item 3</option>
<option value="4">Test item 4</option>
<option value="5">Test item 5</option>
<option value="6">Test item 6</option>
<option value="7">Test item 7</option>
</select> <input type="text"/></form>
<p><a
href="javascript:showfloat()">Show</a></p>
<iframe id="f2" class="float"
src="javascript:'<html></html';" scrolling="no" frameborder="0"></iframe>
<div
id="f1" class="float"> This is some testing text
</div>
</body>
</html>
Thanks to these guys for pointing me in the right direction.