Hai bisogno di aiuto con il mio CSS sulla mia DotNetNuke Skin

Question

Ho creato uno skin per DotNetNuke 5.x e ho provato a fare il layout più possibile usando CSS. Il mio problema è la coerenza tra IE e FF / Chrome / Safari. Con la maggior parte dei siti sono in grado di superare questo, ma in questa skin ho provato tutto ciò a cui potevo pensare e ho trascorso molte ore cercando di ottenere un aspetto coerente tra i due. Quando aggiusto uno, l'altro si rompe. Qualcuno può aiutarmi a risolvere questo problema? Dai un'occhiata alla skin qui in IE e FF per vedere la differenza:

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

Ok ho capito. La risposta è farlo apparire giusto in FF, quindi in DNN sotto le impostazioni dell'host imposta il tuo fallback skin su xhtml 1.0 rigoroso anziché su HTML 4. Questo risolverà il problema.

Grazie per l'aiuto infermiera.

Answer 2

È difficile dare consigli utili senza informazioni più dettagliate. Hai provato a installare Toolbar per sviluppatori IE e Firebug in modo da poter ispezionare direttamente ogni incoerenza e determinare esattamente quali sono le differenze? Trovo che questi strumenti rendano abbastanza facile identificare i problemi di coerenza in modo da poter pubblicare una domanda più specifica di "Questa pagina non ha lo stesso aspetto in IE e Firefox". (Sento il tuo dolore però ... può essere abbastanza difficile risolvere questi problemi: S)

Answer 3

@coultertech ,
L'impostazione del doctype di fallback skin su XHTML è probabilmente una buona scelta (è predefinita in HTML solo per motivi legacy). Tuttavia, le informazioni sul tipo di documento appartengono davvero alla skin stessa (potresti avere una skin progettata per funzionare in HTML e un'altra progettata per funzionare in XHTML). Per specificare il tipo di documento per la skin, vedere il post sul blog di Cathal utilizzando DocType di livello skin .