Frage

Ich habe eine Haut für DotNetNuke 5.x erstellt, und ich versuchte, so viel von dem Layout zu tun mit CSS, wie ich kann. Mein Problem ist die Konsistenz zwischen IE und FF / Chrome / Safari. Bei den meisten Websites, dies zu überwinden ich bin in der Lage, aber in dieser Haut habe ich alles versucht, ich denken konnte, und verbrachte viele viele Stunden damit, den Blick konsequent zwischen den beiden zu bekommen. Wenn ich eine beheben, brechen würde das andere. Kann mir jemand helfen dieses Problem beheben? Bitte werfen Sie einen Blick auf die Haut hier in IE und FF den Unterschied zu sehen:

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;
}
War es hilfreich?

Lösung 2

Ok, ich habe es. Die Antwort ist es richtig, in FF dann in DNN unter den Host-Einstellungen Ihre Haut Rückfall zu bekommen sucht 1.0 strict statt html 4. Dies behebt das Problem xhtml.

Danke für Ihre Hilfe anurse.

Andere Tipps

Es ist schwierig, ohne detaillierte Informationen nützliche Ratschläge zu geben. Haben Sie versucht, die IE Developer Toolbar zu installieren und Firebug , so dass Sie direkt jede Unstimmigkeit untersuchen und bestimmen, was genau sind die Unterschiede? Ich finde diese Tools machen es ziemlich einfach, die Konsistenzprobleme zu identifizieren, so dass Sie eine spezifischere Frage veröffentlichen können als „Diese Seite kann nicht das gleiche in IE und Firefox sieht“. (Ich fühle Ihren Schmerz aber ... kann es ziemlich schwierig sein, diese Probleme zu beheben: S)

@coultertech ,
Einstellen der Haut Rückfall Doctype XHTML ist wahrscheinlich eine gute Wahl (es ist standardmäßig nur für Legacy-Gründen in HTML). Allerdings gehört Doctype Informationen wirklich mit der Haut, sich selbst (Sie können eine Haut, die ausgelegt ist, in HTML zu arbeiten, und andere entworfen in XHTML arbeiten). Um den Doctype für die Haut zu geben, siehe Cathal Blogbeitrag mit Haut-Ebene DocType des .

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top