1. 首頁
  2. 問答
  3. 在我的DotNetNuke皮膚上需要幫助我的CSS

在我的DotNetNuke皮膚上需要幫助我的CSS

2009-05-01 44 views
1

我已經爲DotNetNuke 5.x創建了一個皮膚，我嘗試儘可能多地使用CSS來實現佈局。我的問題是IE和FF/Chrome/Safari之間的一致性。對於大多數網站，我能夠克服這一點，但在這個皮膚上，我嘗試了所有我能想到的，花了許多時間試圖讓兩者之間的外觀保持一致。當我修理一個，另一個會打破。誰能幫我解決這個問題嗎？請看看皮膚這裏在IE和FF看出區別：在我的DotNetNuke皮膚上需要幫助我的CSS

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

回答

1

好的我明白了。答案是讓它看起來正確的FF然後在DNN主機設置下設置你的皮膚回到xhtml 1.0而不是html 4.這將解決這個問題。

感謝您的幫助。

來源

2009-05-01 21:46:41 ecspot

1

這很難在沒有更多詳細信息的情況下提供有用的建您是否嘗試安裝IE Developer Toolbar和Firebug，以便您可以直接檢查每個不一致情況並準確確定它們之間的差異？我發現這些工具可以很容易地識別一致性問題，因此您可以發佈比「此頁面在IE和Firefox中看起來不一樣」更具體的問題。 （雖然我感到你的痛苦......但解決這些問題可能相當困難：S）

來源

2009-05-01 21:10:04

+0

ok如何解決這個問題，有沒有一個標籤可以用來強制IE進入標準模式，以便它像FF那樣渲染CSS？我注意到在IE開發工具欄中，我可以告訴它做到這一點，當我做到這一點工作正常。 – ecspot 2009-05-01 21:38:50

0

@coultertech,
將皮膚後備文檔類型設置爲XHTML可能是一個不錯的選擇（它只是默認爲HTML，因爲遺留原因）。但是，doctype信息確實屬於皮膚本身（您可能有一個皮膚設計用於HTML，另一個設計用於使用XHTML）。要指定皮膚的文檔類型，請參閱Cathal的博客文章using Skin-level DocType's。

來源

2009-05-04 14:03:44 bdukes

相關問題

 相關問題