내 DotNetNuke 스킨에서 CSS 사용에 대한 도움이 필요합니다.

Question

DotNetNuke 5.x 용 스킨을 만들었으며 가능한 한 CSS를 사용하여 많은 레이아웃을 만들려고했습니다. 내 문제는 IE와 FF/Chrome/Safari 간의 일관성입니다. 대부분의 사이트에서이 문제를 극복 할 수 있지만,이 스킨에서는 생각할 수있는 모든 것을 시도해 보았습니다. 그리고 많은 시간을 들여이 두 가지를 일관성있게 유지하려고했습니다. 하나를 고칠 때, 다른 하나는 깨질 것입니다. 아무도 내가이 문제를 해결하도록 도울 수 있습니까? 그것은에 어려운

http://bluebookbasement.coultertechnologies.com

BlueBookBasement_full.ascx

<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %> 
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %> 
<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %> 


<div id="ControlPanel" runat="server" /> 
<div id="mainbody"> 
    <div id="container"> 
     <div id="top_banner"> 
      <div style="float:left; "><dnn:LOGO runat="server" id="dnnLOGO" /></div> 
      <div id="top_banner_right"> </div> 
     </div> 
     <div id="content"> 
      <div id="content_top_left"> 
       <div id="content_top_right"> 
        <div id="top_nav"> 
         <div id="nav_left"> 
          <div id="nav_right"> 
           <div id="nav_main"> 
            <dnn:NAV 
             runat="server" 
             id="dnnNAV" 
             ProviderName="DNNMenuNavigationProvider" 
             IndicateChildren="false" 
             ControlOrientation="Horizontal" 
             CSSNodeRoot="main_dnnmenu_rootitem" 
             CSSNodeHoverRoot="main_dnnmenu_rootitem_hover" 
             CSSNodeSelectedRoot="main_dnnmenu_rootitem_selected" 
             CSSBreadCrumbRoot="main_dnnmenu_rootitem_selected" 
             CSSContainerSub="main_dnnmenu_submenu" 
             CSSNodeHoverSub="main_dnnmenu_itemhover" 
             CSSNodeSelectedSub="main_dnnmenu_itemselected" 
             CSSContainerRoot="main_dnnmenu_container" 
             CSSControl="main_dnnmenu_bar" 
             CSSBreak="main_dnnmenu_break" /> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div id="middle_left"> 
       <div id="middle_right"> 
        <div id="indent_left"> 
         <div id="indent_right"> 

           <div id="breadcrumbs"> 
            <dnn:TEXT runat="server" id="dnnTEXT" CssClass="breadcrumb_text" Text="You are here >" ResourceKey="Breadcrumb" />&nbsp; 
            <dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB" CssClass="Breadcrumb" RootLevel="0" Separator="&nbsp;>&nbsp;" /> 
           </div> 
           <div id="BannerPane" class="BannerPane" runat="server"></div> 
           <div id="TopPane" class="TopPane" runat="server"></div> 
           <table border="0" cellpadding="0" cellspacing="0" width="100%" > 
            <tr> 
             <td class="leftpane" id="LeftPane" runat="server" valign="top"></td> 
             <td class="contentpane" id="ContentPane" runat="server" valign="top"></td> 
             <td class="rightpane" id="RightPane" runat="server" valign="top"></td> 
            </tr> 
            <tr> 
             <td colspan="3"> 
              <table border="0" cellpadding="0" cellspacing="0" width="100%" > 
               <tr> 
                <td class="mid3" id="Mid1Pane" runat="server" valign="top"></td> 
                <td class="mid3" id="Mid2Pane" runat="server" valign="top"></td> 
                <td class="mid3" id="Mid3Pane" runat="server" valign="top"></td> 
               </tr> 
              </table> 
             </td> 

            </tr> 
            <tr> 
             <td class="leftcontentpane" id="LeftContentPane" runat="server" valign="top" colspan="2"></td> 
             <td class="rightpane" id="RightSidePane" runat="server" valign="top"></td> 

            </tr> 
            <tr> 
             <td class="leftpane" id="LeftSidePane" runat="server" valign="top"></td> 
             <td class="rightcontentpane" id="RightContentPane" runat="server" valign="top" colspan="2"></td> 

            </tr> 
           </table> 
           <div id="BottomPane" class="BottomPane" runat="server"></div> 
           <div class="clear"></div> 

         </div> 
        </div> 
       </div> 
      </div>    
      <div id="content_bottom"> 
       <div id="content_bottom_left"> 
        <div id="content_bottom_right"> 
         <div id="content_bottom_middle"> 
          <div id="prefooter"> 
           <div class="leftSide"> 
            <dnn:links runat="server" id="dnnLINKS" CssClass="links" Level="Root" Separator="&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;" /> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="footer"> 
      <div id="footer_left"> 
       <div id="footer_right"> 
        <dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" CssClass="footertxt" />&nbsp;|&nbsp;  
        <dnn:TERMS runat="server" id="dnnTERMS" CssClass="footertxt" />&nbsp;|&nbsp; 
        <dnn:PRIVACY runat="server" id="dnnPRIVACY" CssClass="footertxt" />&nbsp;|&nbsp; 
        <dnn:USER runat="server" id="dnnUSER" CssClass="footertxt" />&nbsp;|&nbsp; 
        <dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="footertxt" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Skin.css

BODY 
{ 
    background-color:#214081; 
    height:100%; 
    margin:0px; 
    padding:0px; 
} 
#mainbody 
{ 
    background-image:url(images/home_2_01.jpg); 
    background-repeat:repeat-x; 
    background-position:top; 

    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    text-align: center; 
} 
#container 
{ 
    width:979px; 
    padding: 0; 
    text-align:center; 
    margin: 0 auto; 
} 
a 
{ 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px; 
    font-weight:normal; 
    font-style:normal; 
    text-decoration:none; 
    color:#000000; 
} 
.clear 
{ 
    clear:both; 
} 
#top_banner 
{ 
    /*background-image:url(images/top_banner.gif); 
    background-repeat:no-repeat; 
    background-position:top; 
    width:979px;*/ 
    height:145px; 
} 
#top_banner_right 
{ 
    float:right; 
    color:#FFFFFF; 
    font-size:20px; 
    line-height:25px; 
    padding-top:70px; 
} 
#content 
{ 
    background:#fff url(images/home_2_05.jpg) repeat-x top; 
    /*background-color:#fff;*/ 
    min-height:414px; 
    padding:0px; 
    margin:0px; 
} 
#content_top_left 
{ 
    background-image:url(images/home_2_04.jpg); 
    background-repeat:no-repeat; 
    background-position: left top; 
    height: 65px; 
    padding:0px; margin:0px; 

} 
#content_top_right 
{ 
    background-image:url(images/home_2_06.jpg); 
    background-repeat:no-repeat; 
    background-position: right top; 
    height: 65px; 
    padding:10px 10px 0px 10px; margin:0px; 
    /*width:100%;*/ 

} 
#content_bottom 
{ 
    background:url(images/home_2_27.jpg) repeat-x bottom; 
    height: 63px; 
    padding:0px; 
    margin:0px; 
} 
#content_bottom_left 
{ 
    background:url(images/home_2_26.jpg) no-repeat bottom left ; 
    height: 63px; 
    padding:0px; 
    margin:0px; 

} 
#content_bottom_right 
{ 
    background:url(images/home_2_30.jpg) no-repeat bottom right; 
    height: 63px; 
    padding:0px; 
    margin:0px; 

} 
#content_bottom_middle 
{ 
    background:url(images/home_2_28.jpg) no-repeat bottom center; 
    height: 63px; 
    padding: 0px 0px 0px 0px; 
    margin:0px; 

} 
#content_all 
{ 
    /*padding: 16px;*/ 
} 
#middle_left 
{ 
    background-image:url(images/home_2_21.jpg); 
    background-repeat:repeat-y; 
    background-position: left; 
    padding: 0px; 
    margin:0px; 
} 
#middle_right 
{ 
    background-image:url(images/home_2_22.png); 
    background-repeat:repeat-y; 
    background-position: right; 
    padding:0px; 
    margin:0px; 
} 
#indent_left 
{ 
    background:url(images/home_2_13.jpg) no-repeat top left; 
    padding: 0px; margin:0px; 

} 
#indent_right 
{ 

    background:url(images/home_2_15.jpg) no-repeat right top; 
    padding: 0px 16px 0px 16px; margin:0px 0px 0px 0px; 
    overflow: auto; 
    /*width: 979px;*/ 
} 

#top_nav 
{ 
    background-image: url(images/home_2_10.jpg); 
    background-repeat: repeat-x; 
    background-position: top; 
    /*width:943px;*/ 
    height:63px; 

} 
#nav_left 
{ 
    /*width: 18px;*/ 
    height: 63px; 
    background-image: url(images/home_2_08.jpg); 
    background-repeat: no-repeat; 
    background-position: top left; 
    padding: 0px; 
    margin: 0px; 
    /*float: left;*/ 
} 
#nav_right 
{ 
    /*width: 21px;*/ 
    height: 63px; 
    background-image: url(images/home_2_12.jpg); 
    background-repeat: no-repeat; 
    background-position: top right; 
    padding: 0px; 
    margin: 0px; 
    /*float: right;*/ 
} 
#nav_main 
{ 

    padding-top: 10px; 
    height: 63px; 

} 
#video_sub 
{ 
    background-color:#7C7C7C; 
    padding:5px; 
    color:#FFFFFF; 
    text-align:center; 
} 

/*.main_tab 
{ 
    background-image:url(images/tab_bg.gif); 
    background-repeat:no-repeat; 
    background-position:top; 
    width:648px; 
    height:16px; 
    padding:15px; 
    color:#FFFFFF; 
    font-size:14px; 
    font-weight:bold; 
    text-transform:uppercase; 
}*/ 

#prefooter 
{ 
    margin: 0px; 
    text-align: left; 
    padding: 10px; 
} 
#footer 
{ 

    background-image:url(images/home_2_38.jpg); 
    background-repeat:repeat-x; 
    background-position:top; 

    height:95px; 
    margin-top: 20px; 
    text-align: left; 

} 
#footer_left 
{ 
    background-image:url(images/home_2_36.jpg); 
    background-repeat:no-repeat; 
    background-position:left top; 
    height: 95px; 
} 
#footer_right 
{ 
    background-image:url(images/home_2_40.jpg); 
    background-repeat:no-repeat; 
    background-position:right top; 
    height: 95px; 
    padding: 36px; 
    color: blue; 
    /*width: 1036px;*/ 
} 
.footertxt 
{ 
    /*color: #fff;*/ 
} 
td.footertxt { 
    font-family: verdana, arial, helvetica; 
    color: #FFF; 
    font-size:10px; 
    font-weight: normal; 

} 
a.footertxt:link, a.footertxt:visited { 
    font-family: verdana, arial, helvetica; 
    color: #FFF; 
    font-size:10px; 
    font-weight: normal; 
    text-decoration: none; 
} 
a.footertxt:hover, a.footertxt:active { 
    font-family: verdana, arial, helvetica; 
    color: #FFF; 
    font-size:10px; 
    text-decoration: underline; 
    font-weight: normal; 
} 

.controlpanel { 
    width: 100%; 
    background-color: #fff; 
} 

.rightpane { 

    width:27%; 
    /*margin-right:16px;*/ 
    /*padding-top:10px;*/ 
    padding: 0px 0px 0px 10px; 
    margin:0px; 
} 
.leftpane { 

    width:27%; 
    /*margin-right:16px;*/ 
    /*padding-top:10px;*/ 
    padding: 0px 10px 0px 0px; 
    margin:0px; 
} 
.contentpane, .TopPane, .BottomPane, .BannerPane { 

    /*width:668px;*/ 

} 
.TopPane, .BottomPane, .BannerPane 
{ 


} 
.mid3 
{ 
    width:33%; 
    padding: 0px; 
    margin: 0px; 
} 

#breadcrumbs 
{ 
    text-align: left; 
    margin-left: 16px; 
} 

/* begin of menu*/ 

/*--------- dnn menu style ----------*/ 
/* main menu td */ 
.main_dnnmenu_bar 
{ 
    cursor:pointer; 
    font-size: 11px; 
    background-color:transparent; 
    width:970px; 
} 

/* Main Menu Normal */ 
.main_dnnmenu_rootitem 
{ 
    color: #fff; 
    font-size: 13px; 
    font-weight:bold; 
    text-align:center; 
    padding:12px 12px 12px 12px; 
    text-transform:uppercase; margin-right:1px; 
    white-space:nowrap; 
    float:left; 
} 


/* Main menu hover */ 
.main_dnnmenu_rootitem_hover 
{ 
    color:#214081; 
    font-size: 13px; 
    font-weight:bold; 
    text-align:center; 
    padding:12px 12px 12px 12px; 
    /*background:url(../images/menu_hover.gif) repeat-x top left;*/ 
    text-transform:uppercase; margin-right:1px; 
    white-space:nowrap; 
    float:left; 
} 

/* Main menu selected */ 
.main_dnnmenu_rootitem_selected 
{ 
    color:#ffffff; 
    font-weight:bold; 
    text-align:center; 
    font-size: 13px; 
    padding:12px 12px 12px 12px; 
    /*background:url(../images/menu_active.gif) repeat-x top left;*/ 
    text-transform:uppercase; margin-right:1px; 
    white-space:nowrap; 
    float:left; 
} 

/* SUB Menu Normal */ 
.main_dnnmenu_submenu 
{ 
    /*border:1px solid #C0D6E5;*/ 
    margin-top: 0px; 
    margin-left: 3px; 
    background-color: #081E43; 
    z-index: 1000; 
    cursor: pointer; 
    cursor: hand; 
    border-top: #FFFFFF 1px solid; 
    border-right: #FFFFFF 1px solid; 
    border-left: #FFFFFF 1px solid; 
    border-bottom: #FFFFFF 1px solid; 
    filter: Alpha(Opacity=75, FinishOpacity=100, Style=1); 
    opacity: 0.75; 
} 

.main_dnnmenu_submenu td 
{ 
    /*background-color:#F8FAFF;*/ 
    z-index: 1000; 
    font-size: 11px; 
    font-weight:bold; 
    text-align:left; 
    color:#fff; 
    line-height:2em; 
    padding: 0px 5px; 
    margin:0px; 
} 

/* SUB Menu hover & selected */ 
.main_dnnmenu_itemhover td 
{ 
    background: #CE0D0D url(../images/submenu_hover.gif) repeat-x top left; 
    color:#ffffff; 
} 
.main_dnnmenu_itemselected td{ 
    background: #CE0D0D url(../images/submenu_active.gif) repeat-x top left; 
    color:#ffffff; 
} 

.main_dnnmenu_break 
{ 
    height: 2px; 
    background-color: #D5E0FF; 
} 

Answer 1

알았어요. 정답은 FF로 바뀌고 호스트 설정에서 DNN으로 들어가면 스킨 백을 HTML 4 대신 xhtml 1.0 strict로 설정합니다. 그러면 문제가 해결됩니다.

도움 주셔서 감사합니다.

Answer 2

을 : 차이를 볼 IE와 FF 모두 여기에 피부에서 봐 주시기 바랍니다 더 자세한 정보없이 유용한 조언을해라. IE Developer Toolbar 및 Firebug을 설치하여 각 불일치를 직접 검사하고 그 차이점을 정확히 파악할 수 있었습니까? 이러한 도구를 사용하면 일관성 문제를 쉽게 식별 할 수 있으므로 "이 페이지는 IE와 Firefox에서 동일하게 보이지 않습니다"보다 구체적인 질문을 게시 할 수 있습니다. (나는 당신의 고통을 느낍니다.이 문제를 해결하는 것은 꽤 어려울 수 있습니다.) S

Answer 3

@coultertech
피부 대체 doctype을 XHTML로 설정하는 것이 좋습니다 (기존의 이유 때문에 HTML로만 기본값으로 설정 됨). 그러나 doctype 정보는 실제로 스킨 자체에 속합니다 (HTML에서 작동하도록 설계된 스킨 하나와 XHTML에서 작동하도록 설계된 다른 하나의 스킨을 가질 수 있습니다). 스킨의 doctype을 지정하려면 Cathal의 블로그 게시물 using Skin-level DocType's을 참조하십시오.