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" />
<dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB" CssClass="Breadcrumb" RootLevel="0" Separator=" > " />
</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=" | " />
</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" /> |
<dnn:TERMS runat="server" id="dnnTERMS" CssClass="footertxt" /> |
<dnn:PRIVACY runat="server" id="dnnPRIVACY" CssClass="footertxt" /> |
<dnn:USER runat="server" id="dnnUSER" CssClass="footertxt" /> |
<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;
}
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.