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 HTML element in the page.

I already saw people hiding selects when opening a popup div, that leads to pretty bad user experience having controls disappearing.

FogBugz actually had a pretty smart solution (before v6) of turning every select into text boxes when a popup was displayed. This solved the bug and tricked the user eye but the behavior was not perfect.

Another solution is in FogBugz 6 where they no more use the select element and recoded it everywhere.

Last solution I currently use is messing up the IE rendering engine and force it to render the absolutely positioned <div> as an ActiveX element too, ensuring it can live over a select element. This is achieved by placing an invisible <iframe> inside the <div> and styling it with:

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

Does anyone have an even better solution than this one?

EDIT: The purpose of this question is as much informative as it is a real question. I find the <iframe> trick to be a good solution, but I am still looking for improvement like removing this ugly useless tag that degrades accessibility.

Answer 1

When hiding the select elements hide them by setting the "visibility: hidden" instead of display: none otherwise the browser will re-flow the document.

Answer 2

Thanks for the iframe hack solution. It's ugly and yet still elegant. :)

Just a comment. If you happen to be running your site via SSL, the dummy iframe tag needs to have a src specified, otherwise IE6 is going to complain with a security warning.

example:

    <iframe src="javascript:false;"></iframe>

I've seen some people recommend setting src to blank.html ... but I like the javascript way more. Go figure.

Answer 3

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

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

Answer 4

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 5

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.

Answer 6

I don't think there is. I've tried to solve this problem at my job. Hiding the select control was the best we could come up with (being a corporate shop with a captive audience, user experience doesn't usually factor into the PM's decisions).

From what I could gather online when looking for a solution, there's just no good solution to this. I like the FogBugz solution (the same thing done by a lot of high-profile sites, like Facebook), and this is actually what I use in my own projects.