So I have a user control in my master page. When it's viewed in IE7 (or IE8 Compatibility mode), it renders behind the page content from the ContentPlaceHolders. I've 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've also 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;
}