IE 6 select controls(Combo Box) over menu

Question

In IE 6 select control(combo box) is displaying on top of menus. I checked some Javascript menus, mmmenu, but all are getting under select control. It's not fixable by assigning Z-Index. Is there any other solution.

Answer 1

This is a well-known bug with IE6 with trying to absolutely position divs on top of select controls.

There are workarounds involving iframe shims, but there is no good answer. The iframe shim answer is to place an iframe underneath whatever div you're trying to place above a select, with the iframe being the same size. Unfortunately, this is a huge pain in the ass.

I suggest using a javascript menu system which already uses iframe shims, such as YUI menus (and I assume jQuery).

Answer 2

Most of the major javascript libraries have easy to implement solutions to this problem. We use jQuery, and the bgiframe plugin is very easy-to-use and solves the problem.

Answer 3

Daniel is definitely right. This is an ugly issue.

However, there may be another solution. If you are using multi-tiered menus that pop open and closed, it is possible to write JavaScript code that literally hides the problematic SELECT elements when the popup is opened (style the element to have a visibility of hidden). Then when the menu closes you can unhide that same SELECT control.

Then you just have to write code that detects which SELECT objects get in the way of a particular menu before it opens. It's not trivial code, but it's definitely possible to write. Then I'd just wrap the entire chunk of code in a conditional that checks to see if the user is on IE as there's no need to run this on Firefox or Safari.