In IE 6 select control(combo box) is displaying on top of menus. I checked some javscript menus , mmmenu,http://www.leigeber.com/2008/11/drop-down-menu/, all are getting under select control. Its not fixable by assigning Z-Index. Is there any other solution.
+2
A:
The problem is that SELECT are "windowed" elements in IE6, and their z-index is above all the other non-"windowed" components. If you absolutely must have something above a combox, you might want to put it inside another windowed compnent, such as an IFRAME, and set the component's z-index to be higher than that of the combobox.
I must admit, this isn't a pretty solution.
scraimer
2009-02-16 05:36:31
+4
A:
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).
Daniel Lew
2009-02-16 05:38:06
+7
A:
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.
jonstjohn
2009-02-16 15:54:39
@jonstjohn - Awesome! That worked pretty well - the only remaining issue with using the bgiframe plugin is that the border of the DIV that I've got still gets overlayed by the dropdowns. So the main part of the DIV shows over the top of the dropdowns, but the black border (CSS - border:2 px solid #cecece;) still appears underneath the dropdowns. Have you run into this at all?
Sam Schutte
2010-01-26 17:02:55
Oops - nevermind. I RTFM and saw the "top", "left", etc. offsets.
Sam Schutte
2010-01-26 17:41:01
Looks like "Top", "Left", etc. do nothing.
Sam Schutte
2010-02-10 17:57:16
+3
A:
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.
Sebastian Celis
2009-02-16 15:54:42