I have a page with several dropdownlist controls.  I also have a <div> that is designed to simulate a popup window (title bar and close button images and an iframe).  When I make the div visible it doesn't quite cover everything that is supposed to be beneath it.  It seems to cover other divs, labels, checkboxes, and textboxes completely.  But dropdownlists show through the border and title bar/close button images of my 'popup' div.  Only the iframe successfully covers the dropdown controls (but the dropdown shows through the iframe border).

I've tried various z-index setting for all controls involved, but nothing seems to work.  I've also tried using an <asp:panel> instead of the div, and I've tried putting the 'popup' div in a user-control. 

Is this a bug, or is there a way to hide a dropdownlist control behind a <div> ?

All controls are runat=server and positioned either absolute or relative.  I'm using VWD Express Beta 2 (.NET 2.0)

Thanks...

Dave

Try this link....http://www.wwwcoder.com/main/parentid/36/site/2245/68/default.aspx

You may also want to try putting the drop down list within a div and set the z-index of the div

Thanks for the suggestion Jamesqua, but I was not able to get it to work using <div> z-indexing.

However, the link that Darmark suggested was very helpful, and I was able to use their work-around solution to solve my problem.  Since dropdownlists and listboxes are based on Windows form controls, they behave differently than other web controls.  By using a second iframe (see below, id="CoverControls", no src=) I was able to cover the dropdownlists and then place my controls over this src-less iframe.  The src for 'frameExcel' is set in the VB code.

Thanks again for the suggestions !

Dave

<div id="ExportWindow" style="position:absolute; top:170; left:300; width:424" runat="server">

<div id="Div5" style="position:absolute; top:0; left:0; width:100%" runat="server">

<iframe id="CoverControls" height="253" width="100%" style="position:absolute; top:0; left:0; border-style:none" frameborder="no" runat="server"/>

<div id="Div1" style="position:absolute; top:2; left:0; width:100%" runat="server">

<iframe id="frameExcel" height="245" width="100%" style="position:absolute; top:0; left:0; border-style:ridge; border-width:2" frameborder="no" runat="server"/>

</div>

<div id="Div2" style="position:absolute; top:0; left:0; width:100%; overflow:hidden" runat="server">

<asp:Image ID="imgBar" ImageUrl="~/Images/BlueBar.jpg" runat="server" />

</div>

<div id="Div3" style="position:absolute; top:2; left:400" runat="server">

<asp:ImageButton ID="imgClose" ImageUrl="~/Images/BtnClose.jpg" style="cursor:hand" ToolTip="Close Window" runat="server" />

</div>

<div id="Div4" style="position:absolute; top:2; left:10" runat="server">

<asp:Label ID="lblTitle" Text="Export to Microsoft Excel" ForeColor="white" Font-Names="Arial" Font-Size="Smaller" Font-Bold="true" runat="server"/>

</div>

</div>

</div>

This is because dropdown list is windowed element in IE...

"In IE6, the HTML <SELECT> element was implemented through the Windows Shell ListBox and Combobox controls. Some key features were missing in the old version of the SELECT element, such as proper support for z-index, TITLE support, and zoom. Web developers had to write complex CSS and scripts to workaround these issues." - from here http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx

One of the solutions - to use some custom control instead of DropDownList, for example this one Sakura DropDown . Or this one from CodeProject 

 Also, Telerik suggest cool controls and dropdown too.

 

 thankss a lot ,it really helped me alot