1
私はDotNetNuke 5.xのスキンを作成しました。私は可能な限りCSSを使用してレイアウトの多くをしようとしました。私の問題は、IEとFF/Chrome/Safariの一貫性です。私はこれを克服することができるほとんどのサイトで、私は思うことができるすべてを試して、2つの間で外観を一致させるために何時間も過ごしました。私が1つを修正すると、もう1つは壊れます。誰でもこの問題を解決する手助けができますか？違いを見るためにここにIEとFFの両方で肌を見てみてください：私のDotNetNukeスキンで私のCSSの助けが必要
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;
}
これはどうでしょうか？IEを強制的に標準モードにして、FFのやり方でCSSをレンダリングするタグがありますか？私はIE Developer Toolbarに気付きました。私はそれを実行するように指示することができ、私が正しく機能するかどうかを知ることができます。 – ecspot