I was just bitten by an incredibly stupid bug in IE. While working on a small webapp which had a drop-down menu (built from CSS and ordinary lists), I was miffed to find the menu seemingly going behind a drop-down (select) form field in IE. After trying the obvious fixes (setting a CSS z-order for the menu, resetting the z-order for the controls including the select control), I did a Google search, reasoning that someone must have encountered a similar problem.
Yep.
According to this, the SELECT control is actually a Windows Shell control and isn’t drawn by the IE rendering infrastructure. Additionally, the IE 6 (and below) engine doesn’t support some CSS attributes on the SELECT control, including the z-order property, which means that DHTML/CSS effects (such as drop-down menus) won’t work when the related DIVs are floated on top of a SELECT control.
Crap.
There are actually several workarounds (one of which involves using conditional markup and an IFRAME, among other things), but I didn’t have time to really hack the code to include the workaround. So, I just moved the concerned menu so that it doesn’t overlay the SELECT controls.
Damn straight. Grr.
Update: Technically speaking, the SELECT control is a “windowed” control, and only respects a z-index relative to other “windowed” controls— which includes the IFRAME element.
Previously: Gnus, Or Emacs' Reason For Being