tags:

views:

146

answers:

2

I want to open a modalpopup in frame.I pasted here my frame's htlm code and css style and This code works well with IE 7.0 but not with IE 6.0.In IE 6.0 i see scrollbars in my panel.What can cause this problem?How can i solve it?

I open frame in my main page by these width and height.

<cc1:modalpopupextender ID="mdlDelete" runat="server" PopupControlID="PnlFrameDelete" BackgroundCssClass="modalBackground" OkControlID="btnDeleteOk" CancelControlID="btnDeleteCancel" TargetControlID="btnDelete" > 
</cc1:modalpopupextender><asp:Panel ID="PnlFrameDelete" runat="server" style="display:none">
 <iframe id="deletefrm" frameborder="0" src="../Frame/deletefrm.aspx" height="98px" width="342px" > </iframe> <div> <asp:Button ID="btnDeleteOk" runat="server" Text="Yes" Width="40px" style="display:none" /> <input id="btnDeleteCancel" type="button" value="No" style="width:20px;display:none" /> </div> </asp:Panel>
<body style="margin: 0px;">

This is the frame's aspx:

<form id="form1" runat="server"> 
<asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Panel ID="pnlDelete" runat="server" CssClass="modal-dialog"> <div class="container"> <div class="header"> 
 <div class="msg">Warning</div> <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('mdlDelete').hide(); return false;" /> </div><div class="body"> <h2><asp:Label ID="lblMsg" runat="server" Text="Are u sure?"></asp:Label></h2> </div> <div class="footer"> <div class="right"> 
 <asp:Button ID="btnDeleteOk" runat="server" Text="Yes" Width="40px" OnClientClick="okay();" /> <input id="btnDeleteCancel" type="button" value="No" onclick="cancel();" style="width:40px" /> </div> </div> </div> </asp:Panel> </form>

And this is the CSS:

/* dialog frame */
.modal-dialog
{
    position:absolute;
    margin:auto;
    height:98px;

}

/* dialog contents container */
.modal-dialog .container
{
    font-family:tahoma,helvetica,arial,sans-serif;
    font-size:11px;
    width:340px;
    border:solid 1px #99aabd;
    background-color:#F2F9FF;
    padding: 0px 0px 0px 0px;
} 

/* dialog header */
.modal-dialog .header
{
    background:url(../images/sprite.gif) repeat-x 0px -1100px;  
    height:20px;
    padding-top:5px;
}

/* dialog header message */
.modal-dialog .header .msg
{
    vertical-align:middle;
    padding-left:6px;
    color:#fff;
    font-size:12px;
    font-weight:bold;
}         

/* dialog body */
.modal-dialog .body
{
    height:40px;
    background-color:#F2F9FF;
} 

/* dialog body message */
.modal-dialog .body h2
{
    padding-top:10px;
    background-color: #F2F9FF;
    font-size:14px;
    text-align:center;
    font-weight:normal;    
}  

/* dialog footer */
.modal-dialog .footer
{
    height:30px;
    background-color: #F2F9FF;
} 

/* dialog footer buttons */
.modal-dialog .footer .right
{
    background-color: #F2F9FF;
    float:none;
    text-align:center;


} 

/* dialog footer checkbox */
.modal-dialog .footer .left
{
    background-color: #F2F9FF;
    float:left;
    text-align:left;

} 

/* dialog close */
.modal-dialog .close
{
    right:4px;  
    background: url(../images/icons.gif) no-repeat -732px 0px;  
    width:16px; 
    cursor:hand;    
    position:absolute;
    top:5px;    
    height:16px;
}

/* dialog close hover */
.modal-dialog .close:hover { background: url(../images/icons.gif) no-repeat -749px 0px; }

/* modal overlay */
.modalBackground 
{
    background-color:Gray;
    filter:alpha(opacity=50);
    opacity:0.5;
}
A: 

Well from a quick look I already see that your frame is set to a width of 342px while your container is set to 340 in the CSS. You also set padding on some of the elements within the container. You'll have to include that in the width and height of your container in order to avoid the scrollbars.

Alex Morales
But why does it cause problem in IE 6.0?In IE 7.0 i dont have problem
Alexander
A: 

I guess this is due to the well known "Border Bug" in the box model of IE6.

Please, have a look to:

http://en.wikipedia.org/wiki/Internet%5FExplorer%5Fbox%5Fmodel%5Fbug

or:

http://www.simple-site.eu/test-lab/ie-bugs/ie6-border-bug.html

Roberto Aloi
ur tip worked.Thanks
Alexander