Solve the IE select overlap bug

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;
}

Anyone has a 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 iframe tag that degrade accessibility.

Answer 1

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.

Answer 2

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 3

I do the same thing with select boxes and Flash.

When using an overlay, hide the underlying objects that would push through. It's not great, but it works. You can use JavaScript to hide the elements just before displaying an overlay, then show them again once you're done.

I try not to mess with iframes unless it's absolutely necessary.

The trick of using labels or textboxes instead of select boxes during overlays is neat. I may use that in the future.

Answer 4

This has been fixed in IE7.

So I think the real question is: How can we get people to upgrade from IE6 to IE7+?

Answer 5

Hi

I don't know anything better than an Iframe

But it does occur to me that this could be added in JS by looking for a couple of variables

1. IE 6
2. A high Z-Index (you tend to have to set a z-index if you are floating a div over)
3. A box element

Then a script that looks for these items and just add an iframe layer would be a neat solution

Paul

Answer 6

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 7

Thanks for this, fantastic trick. I did take some time to work out the content of the div was not inside the iframe but the iframe was just here to trick the div over the select element.

ta to you all,

Answer 8

Mootools has a pretty well heshed out solution using an iframe, called iframeshim.

Not worth including the lib just for this, but if you have it in your project anyway, you should be aware that the 'iframeshim' plugin exists.

Answer 9

Thank you for the posting - I was looking everywhere for this!

Answer 10

Paul said "Then a script that looks for these items and just add an iframe layer would be a neat solution". There's a js that handles this. Google select_fix and you'll find it. But I dunno if It really works.

Answer 11

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 12

@Vlad ..

When using <iframe src="javascript:false;"></iframe> I get some erros in IE like after a POST to a page IE says that have a problem with page in question, and do nothing. With src empty <iframe src=""></iframe> all back to work.