R – ASP.NET User control on a master page renders behind the main content when viewed in IE7

asp.netcontrolsmaster-pagesz-index

I have a user control in my master page. When it is viewed in IE7 (or IE8 Compatibility mode), it renders behind the page content from the ContentPlaceHolders. I tried manually setting the z-index of every element in sight, and none of it will put the control in front. Has anyone else encountered this? It works in Chrome, Firefox, Safari, and IE8 no-compatibility.

I changed my doctype in my master page to the following, as has been suggested elsewhere, but it's no use. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

From the master page:

<%@ Register Src="controls/UserInfo.ascx" TagName="UserInfo" TagPrefix="uc1" %>

<div class="head-links">
                <uc1:UserInfo ID="UserInfo1" runat="server"  />
</div>

From the User Control:

  <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup"  Width="233px" style="z-index: 1000" >

   <p>Are you sure?  Your current shopping cart is valid only for the current Dealer ID.  Switching Dealer IDs will reset your cart according to the new Dealer ID chosen.</p>

   <br />
   <div align="center" style="z-index:99">
      <asp:Button ID="OkButton" runat="server" Text="Ok" />
      <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
   </div>
   </asp:Panel>

And the CSS:

.modalPopup {
background-color:white;
border-width:1px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;

}

 .head-links
{
position: absolute;
top: 0px;
right: 70px;
text-align: left;

width: 170px;
}
.head-links a
{
color: #fff;
text-decoration: underline;
}
.head-links a:hover
{
color: #fff;
text-decoration: none;
}

Best Answer

Do you have a sample out there we can look at? I know you asked about this yesterday, a sample we can hit would help a ton.

One other idea is to add a ContentPlaceHolder on your master page right at the start of the form. If your issue is related the position of the popup in the dom then this can help pull that part out.

Related Topic