derelict Posted August 31, 2006 Share Posted August 31, 2006 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 Link to comment Share on other sites More sharing options...
aspnetguy Posted August 31, 2006 Share Posted August 31, 2006 the only way to over come this is to use display:none to hide it in when the other layer is over top. Link to comment Share on other sites More sharing options...
derelict Posted August 31, 2006 Author Share Posted August 31, 2006 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? Link to comment Share on other sites More sharing options...
aspnetguy Posted August 31, 2006 Share Posted August 31, 2006 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. Link to comment Share on other sites More sharing options...
derelict Posted August 31, 2006 Author Share Posted August 31, 2006 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) Link to comment Share on other sites More sharing options...
aspnetguy Posted August 31, 2006 Share Posted August 31, 2006 I have not found a way to make an iframe transparent...I have resigned myself that it is not possible Link to comment Share on other sites More sharing options...
derelict Posted September 1, 2006 Author Share Posted September 1, 2006 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? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now