Проблема CSS в IFRAME - PullRequest
       11

Проблема CSS в IFRAME

0 голосов
/ 13 октября 2009

Я хочу открыть modalpopup во фрейме. Я вставил сюда код htlm и стиль css моего фрейма. Этот код хорошо работает с IE 7.0, но не с IE 6.0. В IE 6.0 я вижу полосы прокрутки на своей панели. Что может вызвать это проблема? Как я могу ее решить?

Я открываю рамку на главной странице по ширине и высоте.

<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;"> 

Это 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>

А это 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;
}  

Ответы [ 2 ]

0 голосов
/ 13 октября 2009

Полагаю, это связано с хорошо известной «ошибкой границы» в блочной модели IE6.

Пожалуйста, посмотрите:

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

или

http://www.simple -site.eu / тест-лаборатория / Ie-ошибка / ie6-граница-bug.html

0 голосов
/ 13 октября 2009

Что ж, при быстром взгляде я уже вижу, что ваш фрейм установлен на ширину 342px, а ваш контейнер установлен на 340 в CSS. Вы также устанавливаете отступы для некоторых элементов в контейнере. Вы должны будете включить это в ширину и высоту вашего контейнера, чтобы избежать полос прокрутки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...