Need help with my CSS on my DotNetNuke Skin

Question

I have created a skin for DotNetNuke 5.x and I attempted to do as much of the layout using css as I could. My issue is the consistency between IE and FF/Chrome/Safari. With most sites I'm able to overcome this, but in this skin I have tried everything I could think of and spent many many hours trying to get the look consistent between the two. When I fix one, the other would break. Can anyone help me fix this? Please take a look at the skin here in both IE and FF to see the difference:

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

It's difficult to give useful advice without more detailed information. Have you tried installing the IE Developer Toolbar and Firebug so you can directly inspect each inconsistency and determine exactly what the differences are? I find those tools make it pretty easy to identify the consistency issues so that you can post a more specific question than "This page doesn't look the same in IE and Firefox". (I feel your pain though... it can be pretty difficult to fix these issues :S)

Answer 2

Ok I got it. The answer is to get it looking right in FF then in DNN under the host settings set your skin fallback to xhtml 1.0 strict instead of html 4. This will fix the issue.

Thanks for your help anurse.

Answer 3

@coultertech,
Setting the skin fallback doctype to XHTML is probably a good choice (it's only defaulted to HTML for legacy reasons). However, doctype information really belongs with the skin, itself (you may have one skin that is designed to work in HTML, and another designed to work in XHTML). To specify the doctype for the skin, see Cathal's blog post using Skin-level DocType's.