Нужна помощь с моим CSS на моей коже DotNetNuke

Я создал скин для DotNetNuke 5.x, и я попытался сделать как можно больше макета, используя css. Моя проблема заключается в согласованности между IE и FF/Chrome/Safari. С большинством сайтов я могу преодолеть это, но в этой шкуре я пробовал все, что мог придумать, и провел много часов, пытаясь добиться согласованности взгляда между ними. Когда я его исправим, другой сломается. Может ли кто-нибудь помочь мне исправить это? Пожалуйста, обратите внимание на кожу здесь как в IE и FF, чтобы увидеть разницу:Нужна помощь с моим CSS на моей коже DotNetNuke

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

источник

2009-05-01 ecspot

Хорошо, я понял. Ответ заключается в том, чтобы заставить его смотреть прямо в FF, а затем в DNN под настройками хоста установить ваш скин обратно на xhtml 1.0 strict вместо html 4. Это позволит исправить проблему.

Спасибо за помощь медсестры.

источник

2009-05-01 21:46:41 ecspot

Это трудно дайте полезные советы без более подробной информации. Вы пытались установить IE Developer Toolbar и Firebug, чтобы вы могли напрямую проверить каждую несогласованность и точно определить, что такое различия? Я считаю, что эти инструменты довольно легко идентифицируют проблемы согласованности, поэтому вы можете опубликовать более конкретный вопрос, чем «Эта страница не выглядит одинаково в IE и Firefox». (Я чувствую вашу боль, хотя ... это может быть довольно сложно устранить: S)

источник

2009-05-01 21:10:04

ОК, как насчет этого, есть ли тег, который я могу использовать, чтобы заставить IE работать в стандартном режиме, чтобы он отображал CSS так, как это делает FF? Я заметил, что в IE Developer Toolbar я могу сказать это, чтобы сделать это, и когда я это сделаю, он работает правильно. – ecspot

@coultertech,
Установка скина обратно к виду XHTML, вероятно, является хорошим выбором (он по умолчанию не соответствует стандарту HTML). Однако информация типа doctype действительно принадлежит самому скину (у вас может быть один скин, который предназначен для работы в HTML, а другой предназначен для работы в XHTML). Чтобы указать doctype для кожи, см. Сообщение в блоге Cathal using Skin-level DocType's.

источник

2009-05-04 14:03:44 bdukes

Нужна помощь с моим CSS на моей коже DotNetNuke

ответ

Смежные вопросы