How to solve the select overlap bug in IE6?

Question

When using IE, you cannot put an absolutely positioned div over a select input element. That\'s because the select element is considered an ActiveX object and is on top of every

Answer 1

try this plugin http://docs.jquery.com/Plugins/bgiframe , it should work!

usage: $('.your-dropdown-menu').bgiframe();

Answer 2

There's this simple and straightforward jquery plugin called bgiframe. The developer created it for the sole purpose of solving this issue in ie6.

I've recently used and it works like a charm.

Answer 3

I fixed this by hiding the select components using CSS when a dialog or overlay is displayed:

selects[i].style.visibility = "hidden";

function showOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "visible";
    selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "hidden";
    }
}

function hideOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "hidden";
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }
}

Answer 4

As far as I know there are only two options, the better of which is the mentioned usage of an iframe. The other one is hiding all selects when the overlay is shown, leading to an even weirder user experience.