SELECT elements display on top of DIVs

[garann]

Hi,

I asked this in a few web forums, but haven't gotten any help. Perhaps someone here can give me an answer.

I have a page with a drop-down menu made up of nested DIVs and an I-FRAME which holds the page content. Whenever the content in the I-FRAME contains form SELECT elements and the drop-down menu should show up on top of the I-FRAME, the SELECTs display on top of the DIVs holding the drop-down menu. I've tried z-index properties in various configurations, but that hasn't worked.

Does anyone know why this is happening and what I can do to stop it? It's for an intranet where we're only allowed to use IE, so an IE-only solution will work just fine.

Thanks in advance,
g.

[Purple Martin]

The answer is, I'm sorry to say, that iframes are supposed to be on top. iframes are not like any other html elements: they contain a window object (it's like having a whole new browser window on your page, only without the toolbars and status bar). Because of this, iframes will ALWAYS be in front of all other HTML elements (including divs). The only thing that can ever be in front of an iframe is another iframe.

Maybe a little re-think about the page structure could help. Perhaps you could use a div instead of an iframe?

[moonbiter]

This is a known issue for for select elements. It is due to the fact that the select element [msdn.microsoft.com] in MSIE is a "windowed" control [msdn.microsoft.com]. DevGuru has a good description [devguru.com] on the issue, and a workaround (which is kind of ugly).

Another method that might work is to use script to set the visibility of the select element [msdn.microsoft.com] to "hidden" whenever it is supposed to be obscured by the div. This is also ugly, but it wouldn't look too bad unless the select element is not completely hidden by the div.

Note that this is also a problem with Netscape 4.x [the-cool-place.co.uk], the difference being that in this browser all form elements will show thorough an obsuring layer. Since you are on an IE-only network this shouldn't be a problem, but I thought it would be worth pointing out.

[garann]

moonbiter,

Thank you so much for finally clearing this up.

Regarding the link to DevGuru, do you know anything about the approach they suggest? It sounds to me like they're suggesting a glorified FrontPage extension. I'm tending toward just hiding all the SELECTs, but if you have any experience with their approach, I'd very much appreciate hearing it.

Thanks again!
g.

[BlobFisk]

I remember reading a workaround for this - I didn't look into the workings of it, but it may be of help to you.

Here is the link: http://www.milonic.co.uk/menu/overforms_sample.php [milonic.co.uk]

[moonbiter]

... do you know anything about the approach they suggest?

Unfortunately, I have no experience with the technique described on DevGuru.

However, from what I can tell the control is a object from Windows that you are embedding into your HTML document with object element. This would be done on the client side, so there is no server-side mess as with Frontpage extensions. It's definitely an MSIE-only solution -- that DevGuru page is meaninless in Mozilla, Opera, or Netscape.

The MSDE Library has more information [msdn.microsoft.com] on these types of web controls. There seems to be a whole list of them [msdn.microsoft.com]. While they are listed under .NET development, I am pretty sure they work on default Windows systems without the .NET framework installed.