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:
我已经为DotNetNuke 5.x创建了一个皮肤,我尝试尽可能多地使用css进行布局。我的问题是IE和FF / Chrome / Safari之间的一致性。对于大多数网站我都能克服这个问题,但在这个皮肤上,我已经尝试了所有我能想到的东西,花了很多时间试图让两者之间的外观保持一致。当我修复一个,另一个会破坏。谁能帮我解决这个问题?请看看IE和FF中的皮肤,看看它们之间的区别:
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;
}
3 个解决方案
#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)
没有更详细的信息,很难提供有用的建议。您是否尝试过安装IE Developer Toolbar和Firebug,以便直接检查每个不一致性并确定其中的差异?我发现这些工具可以很容易地识别一致性问题,因此您可以发布一个更具体的问题,而不是“此页面在IE和Firefox中看起来不一样”。 (我感觉到你的痛苦......解决这些问题可能非常困难:S)
#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.
好,我知道了。答案是让它在FF中看起来正确然后在主机设置下的DNN设置你的皮肤回退到xhtml 1.0严格而不是html 4.这将解决问题。
Thanks for your help anurse.
谢谢你的帮助。
#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.
@coultertech,将皮肤后备doctype设置为XHTML可能是一个不错的选择(由于遗留原因,它仅默认为HTML)。但是,doctype信息实际上属于皮肤本身(您可能有一个设计用于HTML的皮肤,另一个设计用于XHTML)。要指定皮肤的doctype,请参阅使用Skin-level DocType的Cathal博客文章。
#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)
没有更详细的信息,很难提供有用的建议。您是否尝试过安装IE Developer Toolbar和Firebug,以便直接检查每个不一致性并确定其中的差异?我发现这些工具可以很容易地识别一致性问题,因此您可以发布一个更具体的问题,而不是“此页面在IE和Firefox中看起来不一样”。 (我感觉到你的痛苦......解决这些问题可能非常困难:S)
#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.
好,我知道了。答案是让它在FF中看起来正确然后在主机设置下的DNN设置你的皮肤回退到xhtml 1.0严格而不是html 4.这将解决问题。
Thanks for your help anurse.
谢谢你的帮助。
#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.
@coultertech,将皮肤后备doctype设置为XHTML可能是一个不错的选择(由于遗留原因,它仅默认为HTML)。但是,doctype信息实际上属于皮肤本身(您可能有一个设计用于HTML的皮肤,另一个设计用于XHTML)。要指定皮肤的doctype,请参阅使用Skin-level DocType的Cathal博客文章。