<select> and DHTML menu

[derelict]

Hello, I've ran into the IE bug that makes <select> elements stand out even when there's an element with an higher z-index over it. In my case it's an ASP .NET DropDownList (a <select>, anyway) that refuses to stay below the layer a drop down menu made with DHTML (some <div> that show or hide via JavaScript). The menu works perfectly except for this problem. I've read thought the Web (and these forums) for a solution and I've been trying to solve the problem using the IFrame hack, because I'd like the DropDownList to show, even partially. However, though I'm able to cover the DropDownList with the IFrame, the DDList will get completely hidden (and unusable) because the IFrame is above it (but the menu hovers above the IFrame). Is there a way to fix this? Here's the code: <iframe id="iframeA" style="width:500px; height:22px; position:absolute; border:solid 0px black; z-index:10; display:none;" src="java script:false;" scrolling="no" frameborder="0" ></iframe> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"></asp:DropDownList> <script type="text/javascript"> var iframeA = document.getElementById('iframeA');iframeA.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'; iframeA.style.display='block'; iframeA.style.visibility='visible'; </script> I also tried filter=alpha(opacity=0), with no luck If I remove the filter applied above, I get the whole IFrame in white, again without seeing the DDList. If I leave it like it's above, I get an IFrame that has exactly the same width of the DDList (when the width changes, the IFrame seems to also change), but still can't see the DDList. :S Thanks in advance

[aspnetguy]

the only way to over come this is to use display:none to hide it in when the other layer is over top.

[derelict]

the only way to over come this is to use display:none to hide it in when the other layer is over top.

So using the IFrame isn't an option at all?

[aspnetguy]

well, yes it is, iframes will cover selects if you can do what you want with an iframe....I just don't like using iframes unless absolutely necessary, it is just a personal preference.

[derelict]

well, yes it is, iframes will cover selects if you can do what you want with an iframe....I just don't like using iframes unless absolutely necessary, it is just a personal preference.

Agreed, I never use frames/iframes or elements of the sort. Unfortunately, in this case it really has to be. I can get the IFrame to cover the DropDownList (and it stays on the layer below the menu) but is it possible to make the IFrame transparent or something of the sort, so I can see the DropDownList below? (PS: AllowTransparency doesn't work)

[aspnetguy]

I have not found a way to make an iframe transparent...I have resigned myself that it is not possible

[derelict]

OK, I've made progress :)Right now I'm able to get the menu to hover over the <select>, by wrapping it in a <div> and using a Javascript filter:<div class="content"><div id="coverDiv" style="filter:revealTrans; height:50px; width:200px;><DropDownList></div></div> The only strange thing is that when it hovers the div that contains all these elements (including the menu) get's resized (it's width is increased and then it requires scrolling to view the elements that are more to the right)The content div that get's resized is defined as:div.content{(...)position: absolute;width: 96%;(...)}The Javascript is something like:if( Showing the menu items ){(...)coverDiv.filters["revealTrans"].apply();//display=block messed with the DDL's positioningdropdownlist.style.visibility='hidden'; }else{dropdownlist.style.visibility='visible';//A WORKAROUND: content.style.width='500px' }If I use content.style.width='500px' it'll get resized back to it's proper width, but that isn't very nice for different resolutions (a requirement) and the content will be constantly moving when the user activates de menu; is there anyway to stop this from happening?