Affects: IE5, IE5.5, IE6
Trackers:
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!
Example:
<style type="text/css">
#item_1 {
left: 75px;
position: absolute;
top: 75px;
z-index: 0;
}
#item_2 {
background-color: #efefef;
border: 1px solid #0000ff;
display: block;
height: 200px;
left: 100px;
position: absolute;
top: 100px;
width: 300px;
z-index: 9999;
}
#item_3 {
left: 150px;
position: absolute;
top: 150px;
z-index: 10;
}
</style>
<select id="item_1">
<option value="4">Always Renders Through!</option>
</select>
<div id="item_2">This should float over anything!</div>
<select id="item_3">
<option value="7">Always Renders Through!</option>
</select>
This should float over anything!
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:
<coming soon...>
Related Issues: None.
Posts
