IE 6 and Select Boxes

bloritsch — Wed, 11 Jul 2007 14:18:00 +0000

Apparently, Microsoft did make a useful improvement in IE 7. They fixed a bug (I know, they’re supposed to be “features”) where select boxes in forms would display no matter what when you popped up an absolute DIV on top of them. This issue has been around for a while. The technical description is that the select box is a “windowed” control and as such has z-index priority over everything. There are two solutions depending on what version of IE you have. If you are dealing with IE 5.5 or earlier, you need to create a blank IFRAME under your div. If you are dealing with IE 6, you need to surround the control with a div, and hide it when you are covering it. Firefox and IE 7 both handle the display correctly.

Thankfully, I don’t have to worry about IE 5.5 or earlier for my client. It baffles my mind how Microsoft can claim W3C compliance with serious issues like that in their software. Yes, this falls in line with the trials and travails of creating cross-browser user experiences—but why does it have to be so hard? You’ve got the way that everyone else in the world does it, and then you have the workaround for Microsoft. It’s great that we have JavaScript libraries like Prototype that take most of the pain out of it, but why not truly implement the spec? I can understand and live with subtle differences in how browsers calculate size, but something so obviously flawed.

Technorati Tags: iframe div design IE6 workaround

Just a Thought...: Tag select

IE 6 and Select Boxes