IE7 select box dissapearing when setting css

I have a div (with a transparent background) with a z-index of 1 on top of some 开发者_开发知识库select boxes.

In all browsers except for IE7 this displays and functions correctly. In IE7 the select boxes appear but are not able to be clicked or changed.

In IE7 the only workaround is to set the div containing the background to z-index -1. This then causes problems with display or the other box in other browsers.

If I do this rule (attempting workaround)

select{
position:relative;
z-index:1000;
}

All select boxes will disappear in IE7.

What can I do?

I fixed this with a conditional statement for IE7.

In IE7 -

z-index:-1;

All other browsers -

z-index:1;

I see what you're doing. Ok. A tip on this type of thing? Don't try and do it yourself!

There are lots of modal windows out there that you can use to overlay a div element on a window and add content to it. Some will grey out the background, some will just float over your content. Do a bit of searching, you'll find one that suits your needs.

The reason you should do this is that select elements are operating system form elements, not web form elements (this is a real pain in the behind). This means that they don't behave in the same way as standard html block elements (they're special and like to be treated special). For this reason, they will always appear as a top level item (even if they are not as in your case). You could write a load of javascript to change the DOM and work around this, but it's already been done.

I know it's probably not what you wanted to hear, but if you do this search, you'll save yourself a lot of heartache.

Hope this helps.