Select tag z-index glitch in IE

I thought this was fixed for IE7, but not so.

Set Up:
We have a page with 3 tabbed divs; only one is displayed at a time, while the others are display: none. The default div that displays on load contains a select tag which changes the content in a table inside that div based on date. The second div displays a dynamically generated table in standard HTML. The third and last div contains a Flash movie.


Problem:
In IE 6 & 7, when the second tab is clicked to hide the first div and display the second div, there is a mystery horizontal rule (at the same height as the top of the table in the first div). This line seems to be on the top layer, and causes anything below the line to be unclickable.


Solution:
Quickie: remove the <select> tag and use something else (custom slider or create the select menu as a DHTML drop-down instead).

This sounds like it could be fixed with the jQuery iframe method, but we haven’t tried it yet.

But what I want to know is why the select still creates the bug when it’s containing element has display: none. Does display: none mean that all the included elements are still lurking underneath? This makes no sense since normally, display: none causes the page to change size.

CSS drop-down/fly-out menus and IE select elements

IE5-6 renders select menus on the top-most layer, no matter how you set up the HTML or how you declare the z-index.

The last time this issue came up for me, I included a javascript that would make the select element disappear when the overlapping drop-downs were triggered. This worked fine because the select menu was the same width as the drop-down and so it was completely covered. Now with a different site, this is an impractical option, mainly because there’s no telling where the select menus will end up or how wide they’ll be.

I’m trying to meld a bunch of CSS drop-down/flyout solutions into one mass. Here are all the features I need:

1. Works in IE5-6, IE7, Safari, Mozilla/Firefox
2. Flyout sub-submenus
3. Drops over select menus in IE5-6
4. Includes hover margin of error (mouse forgiveness when moving from menu to sub-menu)
5. Simplest HTML = easiest maintenance

I’m looking at the combined ADxMenu with the WCH script from aplus.co.yu. Haven’t finished testing yet, so I’ll update this entry when it’s all working.