Site Navigation

Friday, November 30, 2007

bug 111 - IE Broke The Web 2.0

Issue: #101
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.