We have a javascript menu on a client’s site that works great in everything except IE 6. Since IE 6 still has roughly a 25% market share, we need to get it fixed. The problem is that on the side there are a few form field drop down selectors. Now when a menu item is highlighted, the drop down activates but it is loading behind the form selectors. Does anyone know a hack or way to fix this? Please see the attached.
Unfortunately that will not work as IE6 gives selects a zIndex that is infinite. You can’t put anything in front of it.
If you put the select in an iframe (for IE6 only) that will allow it to work since the main page is in front of the iframe content. You can’t just put it in an iframe for all browsers though because Opera 8 has the same problem with iframes as IE6 has with selects.
The simplest fix is to just make sure they never overlap. Alternatively just hide the select when you want something in front.
I’m having the same problem. My menu uses CSS instead of JavaScript. The menu expands on hover. How does one hide the select elements when the browser is IE6? I tried setting the display to none.
There is a fix for IE6 - it is called IE7. You don’t have any control over whether people install the fix or not though.
Unfortunately people using IE6 are a lot slower at upgrading to fix the problem that select lists display in front of everything else than Opera 8 users were to upgrade and fix the corresponding problem that browser had with iframes.