Please help : Issue with Dropdown in IE6

We are having a peculiar problem with Dropdown controls in IE6 and this seems to be a proven & known issue with IE browser version 6.0.

Below is a brief illustration of the issue followed by the results of my research(extracts from online forums which INVARIABLY state that this is a known IE6 issue and suggest a blind workaround(which they say is a Can’t-but solution for this)

I request your suggestions on this, if you feel we can fix it, or a better workaround than what is suggested below.

Issue – Dropdown controls get higher precedence in visibility when overlapped by any other control on page.

Illustration –

Normal page – any browser (Please observe the highlighted dropdown which is causing the problem)

Page with floater in IE7 – Floater comes up when we click the “How is it driven?” hyperlink (Floater is just a html span tag)

Page with floater in IE6 –

My research online on a solution for this brought up these findings –

http://forums.asp.net/p/1178243/1996824.aspx#1996824

ie 6 and it's drop down lists... I run into that so often, and I'm also hoping for a "good" solution for that. In good I mean some simple css attributes for example.. But I dunno any other way than hiding them.

Or just trying to keep your animations away from the drop down lists...

ie6 is still widely used (especially in corporations) and cannot be ignored... So this issue should actually concern anyone who has ever used the animations on a page with drop down lists...  

http://www.codetoad.com/forum/15_24605.asp

I assume you mean for "dropdowns in IE".
I'm sorry to disappoint you, but the answer is: you can't put them below.
In Internet Explorer dropdown controls are not rendered by the IE engine, but the native Windows GUI engine. To ensure proper visibility of the webpages, Microsoft decided (or more likely were forced) to put these controls on top of all other content. In result any drawings that should appear on top of them, appear below, regardles any z-index properties and creation order.

This was not a problem in the ages of static html, but sometimes it is a real pain for the dynamic content. AFAIK the first to invent a workaround are Microsoft themselves.

To fix this missbehavior the dhtml developers use scripting to hide the dropdowns when another element might appear above. You may remember microsoft.com some years ago, when the main site had black dropdown menus in the top right corner. Experienced user could notice that when the mouse was over that menus, all the dropdowns inside the page disappear, and reappear when the mouse moves out of the menu area.

More recent scripting (and more resource consuming) involve calculating of the position of the floating elements and wither they overlap a dropdown to hide only the colliding ones.

I perosnaly see a way to further improve that workaround to partialy hide(cut) the collision areas from the dropdowns, using the CSS clip property, which should be dynamically calculated by the dhtml script. Anyway IMHO it doesn't worth the time and cpu usage.

While hiding the dropdown doesn't seem an option in your case, the best and easiest workaround i see is to put the "tip" outside the dropdown. That is what i would do.

http://www.codetoad.com/forum/20_22736.asp

This explains something about <iFrame> element…which I’m trying to implement

http://www.codetoad.com/forum/20_22919.asp

This is a common problem. SELECT elements (dropdowns) always come to the front of the Z-Order. The way some people handle this is to actually remove the SELECT elements as needed using DHTML. (style.visibility = "hidden";)

http://www.dynamicdrive.com/forums/archive/index.php/t-19620.html

there is a drop down list below my HVMenu. As the HVMenu shows its drop down child, it appears under my drop down list. This problem appears in IE browser, it is ok in FireFox.

What can i do to solve this problem???
In IE (6 and previous versions), the drop down control is a windowed control and layer or z-index properties can not be applied on this control. Always this control will be put above all other document level controls. Only way to get rid of this is to hide the drop down list controls using javascript whenever we use the menu.

http://www.webdeveloper.com/forum/showthread.php?t=177792

………it is for some reason being hidden by the div below it on the pages that have all the elements but it works when it is by itself. Here's a test that works correctly in IE6, css only dropdown:http://www.afterglowcosmetics.co.uk/test.html Someone please help me spot the error!

I"ve added the div with the class="main" on the test page. As you can see the dropdown goes behind this div for some reason. Can someone help me get it to be positioned behind? I've added z-index, main has a z-index of 50 and the dropdown has a z-index of 99 so I don't know why it is not on top!

This is an issue in UAT for Geico MotorCycleService.

Geico testers normally use IE6 and sometimes with the lowest possible resolution (I believe we can expect the same from some end-users as well).

Somehow, I don't think the workaround suggested in the above forums is sensible, though, it may well get proved that it is the ONLY solution.

Please let me know if you have a better workaround than hiding all the dropdowns on the page when any dynamic control would overlap a dropdown.

Thanks, in advance.