Ajax ModalPopup wrong display in IE8

Question

I have a problem with the modalPopup control when I use it on IE8. The panel which is need to be popUp is already poped up.

As it suppose to look like ( in newer browsers than IE 8), there are panels in a row and when you click on one of them, a windows pops up ( using AJAX modalPopUp)

And in IE8 it shows the popUp window(panel) without even clicking on one of the panels in the list.

Here is the code :

<asp:updatepanel id="UpdatePanel1" runat="server">
<contenttemplate>
<asp:panel id="PanelManufacturerPictures" runat="server" scrollbars="Auto" width="100%">
<asp:datalist id="DataListManufacturersPictures" runat="server" cellpadding="5" repeatdirection="Horizontal" repeatcolumns="11" showfooter="False" showheader="False" cellspacing="16">
<itemstyle height="75px" width="75px"/>
<itemtemplate>
    <asp:imagebutton id="ImageButtonManufacturerPicture" runat="server" alternatetext='<%# eval("manufacturername") %>' Height="100%" ImageUrl='<%# "~/elimansourwcf/manufacturerspictures/"+databinder.eval(container.dataitem, "imageurl") %>' ToolTip='<%# eval("manufacturername") %>' Width="100%" CausesValidation="False" /> <asp:roundedcornersextender id="RoundedCornersExtenderDetailsManufacturers" runat="server" targetcontrolid="PanelManufacturersDetails" radius="8" bordercolor="Red">
</asp:roundedcornersextender>
<asp:modalpopupextender id="ModalPopupExtenderManufacturerDetails" runat="server" popupcontrolid="PanelManufacturersDetails" targetcontrolid="ImageButtonManufacturerPicture" backgroundcssclass="modalBackgroundProducts" cancelcontrolid="ButtonManuCancel">
</asp:modalpopupextender>
<asp:panel id="PanelManufacturersDetails" runat="server" backcolor="White">
<div dir="rtl">
    <asp:label id="LabelManufacturerName" runat="server" font-bold="True" font-size="XX-Large"></asp:label>
    <div style="float: right;">
        <asp:table id="TableDetails" runat="server" cellpadding="15" font-bold="True" cellspacing="15">
        <asp:tablerow id="TableRow5" runat="server">
        <asp:tablecell id="TableCell8" runat="server" width="100px" horizontalalign="Left" columnspan="2">
        <asp:roundedcornersextender id="RoundedCornersExtenderDetailsManufacturerCancel" runat="server" targetcontrolid="ButtonManuCancel" radius="8">
        </asp:roundedcornersextender>
        <asp:button id="ButtonManuCancel" runat="server" text="צא מחלון זה" width="75px" causesvalidation="False" backcolor="Red" forecolor="White" font-bold="True"/>
        </asp:tablecell>
        </asp:tablerow>
        </asp:table>
    </div>
</div>
</asp:panel>
</itemtemplate>
</asp:datalist>
</asp:panel>
</contenttemplate>
</asp:updatepanel>

I saw a post:

Ajax ModalPopup wrong display in IE8 - IE9 But I didn't understand where to put the css "position: absolute;"

Here is the URL of the site:

www.emansour.co.il

Thank you for your help

[Edit] I noticed that this problem occur just when I use the modalPopup in a Bounded Data Control.

Answer 1

Your error is being caused by one of the RoundedCornersExtender. For some reason, sometimes these do not play nicely nested inside numerous Panels controls and UpdatePanels. I got rid of the issue by removing the RoundedCornersExtender that is styling your buttons. Remove this RoundedCornersExtender control, and add the following css class in your code to give your button the rounded corner:

.rounded
{
    color: white;
    background-color: red;
    font-weight: bold;
    width: 75px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border: 0px none;
}

then apply the style to your button:

<asp:Button ID="ButtonManuCancel" runat="server" Text="צא מחלון זה" Width="75px" CausesValidation="False" BackColor="Red" ForeColor="White" Font-Bold="True" CssClass="rounded" />

I left the other RoundedCornersExtender and tested on IE and was not getting the error. The AjaxToolkit can sometimes be really useful, but other times can be a real pain in the butt. If you want to add simple functionalities like these (simple css) I would reccomend against using a ControlExtension for such a simple thing. I would use Ajax.net controls for more complex stuff, or avoid it altogether.