Affects: IE5, IE5.5, IE6
MSKB Tracker: 177378
Fixed in: IE7
The most significant part of Web 2.0, was the ability to put more relevant content on the screen for a user. It could be a Gmail popup with a users' avatar, or a DHTML inline popup calendar, an AJAX based "lightbox", or the coolest form widgets we've ever seen, etc.
Almost any "Web 2.0" site/application uses some level of floating elements... but unless you only support IE >= 7, doing this requires an intimate knowledge of IE's worst rendering bug ever.
No matter what CSS z-index you set, you can't float an element (like a div) over a select list!
border: 1px solid #0000ff;
<option value="4">Always Renders Through!</option>
<div id="item_2">This should float over anything!</div>
<option value="7">Always Renders Through!</option>
Known Workarounds: Three ugly hacks.
1.) Hope that a select will never appear under your floating elements. (a.k.a. Ostrich with head in the sand technique)
2.) Hide select lists, whenever showing a floating element (very quirky behavior for the end user)
3.) Float an iframe (with nothing in it) over the area first, then float the element
Option 1 only works if you can 100% guarantee that nothing will overlap your select lists (e.g. not likely). Option 2 works, but looks horrible, thus leaving Option 3 as the only reasonable workaround... and yes, it requires the most work of the 3 options.
Example Workaround Code:
Related Issues: None.