SELECT control fixed in IE 7

Wow! This is some great news! Finally Microsoft has acknowledged the problem with the SELECT control and finally fix it in IE 7. How many hours I spent on this tricky bug.

I used a lot of hacks to avoid the issue, but this is really the thing which I was waiting for. Now no reason not to migrate to IE 7.

From the IE blog:

SELECT element in IE7 - An Overview

In IE6, the HTML <SELECT> element was implemented through the Windows Shell ListBox and Combobox controls. Some key features were missing in the old version of the SELECT element, such as proper support for z-index, TITLE support, and zoom. Web developers had to write complex CSS and scripts to workaround these issues.

In IE7 however, we re-implemented the <SELECT> element to make IE7 more standards-compliant. This new version does not use any Shell controls any more. In fact, it is implemented totally through the MSHTML framework, including styling, UI interaction, and rendering. Thus the SELECT element in IE7 is more of an HTML element than the former legacy control.

SELECT element in IE7 - Windowless and Z-order

A big problem of IE6’s SELECT element was that it could not perform z-index.

Here is an illustration.

When a user moved the mouse over to the “Mouse Over Here” in figure 1, this triggered the select element. Z-Index=1 should be behind and hidden by the select element (which appears as a yellow box) while Z-index = 3 should appear visible above the select element.

Instead with the legacy Windowed element you will find these two SELECT elements always placed on top of the floating DIV, even though the DIV has a higher z-index value.