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>

Always Renders Through!

This should float over anything!

Always Renders Through!

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.

bug 287 - can't float over an iframe in Konqueror

Issue: #287
Affects: Konqueror 3.5.4
Status: [Fixed!]
Fixed in: Konqueror 4.0

Advanced web sites and applications these days tend to "float" content above the document window to provide dynamic tooltips, calendars, option lists, lightbox effects for image galleries etc.

In order to be able to do this, an element must be "floated" above the rest of the page, often with a higher z-index value to ensure it stays above all other elements.

In Konqueror however, you can't float elements above an iframe, regardless what the z-index is set to. The only exception is that you can float another iframe, over an iframe. See KDE Bug ID:141615.

Example:

<style>
#myFloaterDiv {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 100px;
  left: 100px;
  z-index: 1000;
}
#myIframe {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 200px;
  left: 200px;
}
</style>
<div id="myFloaterDiv">
  Floating above
This should be above the iframe.
</div>
<iframe id="myIframe" src="http://www.digg.com/">
</iframe>

Known Workarounds: None.

Related Issues: None.