Modal popup extender is rounded locally but not on the server

Question

ASP.net ajax 2.0

I've got a modalpopup extender that looks like this:

alt text http://img441.imageshack.us/img441/6342/localmodal.jpg

The actual modal popup is wrapped around a rounded corner extender to give it the nice curved look. Here is a simple snippet of code:

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel" OkControlID="btnOk" TargetControlID="ibStartNow" PopupControlID="Panel2" PopupDragHandleControlID="PopupHeader" BackgroundCssClass="ModalPopupBG">
   <asp:Panel ID="Panel2" style="display: none" runat="server">
                                <asp:Panel ID="Panel3" runat="server">
                                <div class="ConfirmationPopup" style="text-align:center; margin-right:auto;margin-left:auto;">
                                    <div class="PopupHeader" id="PopupHeader">
                                        Confirm Start Now<br />
                                    </div>
                                    <div class="PopupBody">
                                            <br />
                                            This will save the expense report header and allow 
                                            <br />
                                            you to enter items into your expense report, are you sure?
                                            <br />
                                            <br />
                                    </div>
                                    <div class="Controls">
                                                <asp:ImageButton ID="btnOk" runat="server" imageurl="~/images/ok.gif" CausesValidation="False" />
                                                <asp:ImageButton ID="btnCancel" runat="server" imageurl="~/images/cancel.gif" />
                                    </div>
                               </div>
                               </asp:Panel>
                               </asp:Panel>
                                <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="Panel3"  Radius="6" Corners="All" BorderColor="#9BD1FA" Color="#377CB1">
                        </ajaxToolkit:RoundedCornersExtender>

The strange thing is on my local machine running IE8 it looks great, even on the server using firefox / chrome it looks great. But once it is on the server and I use IE8 it is no longer rounded it is basically a square.

It just doesn't make sense why locally using IE8 it works, but on the actual web server using IE8 it is no longer rounded, it looks like this:

alt text http://img441.imageshack.us/img441/2977/servermodal.jpg

Answer 1

My guess is you have probably moved on with this issue since this was so long ago but I stumbled across this http://www.mindfiresolutions.com/Workaround-for-Modal-Popup-with-RoundedCornerExtender-issue-833.php which seems to work for me. It looks like the trick is, in addition to using two panels, set the back color of the container panel to Transparent