Thursday, 23 August 2007

Absolute positioned div and dropdown box

An old bug has been fixed in IE 7. It's always working as expected in FireFox but as I can remember it wasn't drawing it out nicely (it is now, in 2.0.0.6).

See the code below:

<div id="DivA" style="position:absolute;
width:200px; height:200px; background-color:Green; display:block; z-index:100;">
I am a div</div>

<select name="DropDownList1" id="DropDownList1">
<option value="Item1">Item1</option>

<option value="Item2">Item2</option>

<option value="Item3">Item3</option>

<option value="Item4">Item4</option>
</select>


In IE 6 showing a div in absolute position on top of / overlapping a select (drop down box) would always fail. The select box will ALWAYS be on top of everything except one - the iFrame. Therefore we need an iframe with exactly the same size draw beneath the div in order to hide the select box completely. In IE7 this trick is no longer required. :)

No comments:

Post a Comment