Question

Problem:

Under IE8 the popup panel for the Ajax Control Toolkit is falling underneath the modalBackground (see screen shot). This only happens in IE8.

Previous Attempts:

I tried overriding the z-index (it looks like a z-index issue) in the css file as such:

.modalPopup
{
    background-color: white;
    width:200px;
    height:150px;
    z-index:100000001 !important; 
}

and the issue still exists. Using firebug in Firefox I can check the change in the z-index when the user clicks on the button to display the modal popup, and the z-index changes correctly.

Code:

<asp:ModalPopupExtender ID="MPsdE" runat="server" Enabled="true" DynamicServicePath=""
    OkControlID="OkButton" 
    CancelControlID="CancelButton"
    TargetControlID="MoreServers"
    PopupControlID="ModalPanel"
    BackgroundCssClass="modalBackground" >
</asp:ModalPopupExtender>




<asp:Panel ID="ModalPanel" runat="server" >
  <div class="modalPopup" >
    test <asp:Button ID="OkButton" runat="server" Text="Okay"/>
    <asp:Button ID="CancelButton" runat="server" Text="Cancel"/>
  </div>
</asp:Panel>

CSS:

.modalBackground 
{
    position:fixed; 
    background-color:#000; 
    filter:alpha(opacity=50); 
    opacity:0.5;  
}
.modalPopup
{
    background-color: white;
    width:200px;
    height:150px;
    z-index:100000001 !important; 
}

I’ve also tried setting the z-index of the modalBackground lower, with no success.

Questions:

1. Has anybody ever had this issue before? If so could you point me in the right direction?
2. If you haven’t had this issue, what would be some things you would look at? I’m completely out of ideas

Answer 1

The issue turns out not to be in anything that I posted. The issue is in our template somewhere, maybe a tag not closed.