Hi there,
I cannot find out what is wrong when I changed the HOME template or/and the Skin.css. Now with IE8 it renders all the webpage aligned to the left instead of the center. With other Dark Knight Skins (two column, etc) it look good in IE but not the modified skin.
Attached is the code:
Skin.css:
@font-face {
font-family: 'TitilliumText22LBold';
src: url('Fonts/TitilliumText22L005-webfont.eot');
src: url('Fonts/TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'),
url('Fonts/TitilliumText22L005-webfont.ttf') format('truetype'),
url('Fonts/TitilliumText22L005-webfont.woff') format('woff'),
url('Fonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg');
font-weight: normal;
font-style: normal;
}
html{height:100%;}
#Body{height:100%;font-family:Helvetica, Arial, sans-serif;color:#333;}
#Form{height:100%;}
a{outline:0;border:0;}
p, ul, ol{margin:0;padding:0 0 1em 0;}
#DNN6{width:100%;position:absolute;z-index:1;min-height:100%;background-color: #ffffff;}
/* #Background{background:#ffffff url('Images/Body-BG.jpg') repeat-x 0 bottom;position:absolute;bottom:0;width:100%;height:240px;z-index:-1;}*_*/
h1{font-family:TitilliumText22LBold;font-size:26px;}
h2{font-family:TitilliumText22LBold;font-size:22px;}
h3{font-family:TitilliumText22LBold;font-size:18px;}
/* #Header{width:100%;background:url(images/Header-BG.png) repeat-x center bottom;}
#Header .Content{position:relative;width:960px;height:63px;margin:auto;}
#Header #ContentBG{width:960px;margin:auto;background:#ff0000 url(images/Header-BG-Variable.png) no-repeat center bottom;} */
/*WAM - removed z-index*/
/* #Header #Nav{width:720px;height:32px;position:absolute;bottom:25px;left:0;} */
/* #Header .SearchContainer{position:absolute;z-index:22;bottom:19px;right:0px;width:200px;height:32px;background:url(images/search.png);}
#Header .SearchContainer .SearchBorder{border:0;background:none;}
#Header .SearchContainer .SearchIcon{float:left;width:40px;padding:3px;background-position:9px 6px;}
#Header .SearchContainer .SearchTextBox{float:left;background:none;width:140px;margin:3px;color:#eee;}
#Header .SearchContainer .SearchButton{float:left;text-indent:-9999px;display:block;height:32px;width:30px;padding:0;} */
/* #MenuPane2{width:590px;background:url(images/Header-BG.png) repeat-x center bottom;} */
#MenuPane2 .Content{position:fixed;width:590px;height:63px;margin: 10 0 0 450;}
/* #MenuPane2 #ContentBG{width:590px;margin:auto;background:#ff0000 url(images/Header-BG-Variable.png) no-repeat center bottom;} */
/*WAM - removed z-index*/
/* #GFMenuPane #GFNav{width:400px;height:200px;position:absolute;bottom:25px;left:200;} */
/* #GFMenuPane{width:400px;height:200px;position:absolute;left:200; top:10px} */
/* #MenuPane2 .SearchContainer{position:absolute;z-index:22;bottom:19px;right:0px;width:200px;height:32px;background:url(images/search.png);}
#MenuPane2 .SearchContainer .SearchBorder{border:0;background:none;}
#MenuPane2 .SearchContainer .SearchIcon{float:left;width:40px;padding:3px;background-position:9px 6px;}
#MenuPane2 .SearchContainer .SearchTextBox{float:left;background:none;width:140px;margin:3px;color:#eee;}
#MenuPane2 .SearchContainer .SearchButton{float:left;text-indent:-9999px;display:block;height:32px;width:30px;padding:0;} */
#Content {min-height: 250px; padding-top: 0px;}
#Panes{width:960px;margin:auto;}
/*.GFMenuPane{float:right; width:790px;font-size:11px;margin:: 0 0 0 0;} */
.LogoRowRight{float:right;width:650px;font-size:11px;}
#Login{text-align:right;color:#c5c5c5;}
#Login .SkinObject, #Login .LoginLink{color:#9c0b12;text-transform:uppercase;padding:0 0 0 5px;text-decoration:none;}
#Login .SkinObject:hover, #Login .LoginLink:hover{text-decoration:underline;}
#Login .LoginLink{padding:0 5px; }
#LogoRow{padding:8px 0 12px 0;}
#Breadcrumb{height:30px;width:960px;line-height:30px;background:url(images/Breadcrumb-BG.jpg) no-repeat 0 0;margin:0 0 2em 0;font-size:11px;}
#Breadcrumb span{display:inline-block;height:30px;float:left;font-weight:bold;color:#666;font-size:11px;}
#Breadcrumb .Intro{text-transform:uppercase;padding:0 15px 0 13px;margin:0 15px 0 0;font-size:10px;background:url(images/Breadcrumb-FirstSep.jpg) no-repeat right 0;}
#Breadcrumb .SkinObject{display:inline-block;color:#944e4e;height:30px;float:left;}
#Breadcrumb .SkinObject:hover{text-decoration:underline;}
#Breadcrumb span.Sep{width:14px;background:url(images/Breadcrumb-Sep.jpg) no-repeat 0 0;margin:0 15px;}
.ContentClass{margin: 40 0 0 0;}
#dnn_ContentPane, #dnn_BottomPane{clear:both;}
#DNN6.Home #dnn_LeftPane, #DNN6.TwoColRight #dnn_LeftPane{float:left;width:630px;margin:0 30px 0 0;}
#DNN6.Home #dnn_RightPane, #DNN6.TwoColRight #dnn_RightPane{float:left;width:300px;}
/* #DNN6.Home #dnn_MenuPane2, #DNN6.TwoColRight #dnn_MenuPane2{float:left;width:590px;margin:0 0 0 0;} */
#DNN6.ThreeCol #dnn_LeftPane{float:left;width:180px;margin:0 30px 0 0;}
#DNN6.ThreeCol #dnn_CenterPane{float:left;width:470px;margin:0 30px 0 0;}
#DNN6.ThreeCol #dnn_RightPane{float:left;width:250px;}
/* #DNN6.ThreeCol #dnn_MenuPane2{float:left;width:590px;margin:0 30px 0 0;} */
#DNN6.TwoColLeft #dnn_LeftPane{float:left;width:300px;margin:0 30px 0 0;}
#DNN6.TwoColLeft #dnn_RightPane{float:left;width:630px;}
/* N6.TwoColLeft #dnn_MenuPane2{float:left;width:590px;margin:0 30px 0 0;} */
#Footer{min-height:45px;width:100%;background:#222 url(images/Footer-BG.jpg) repeat-x 0 0;}
#Footer .Content{width:960px;margin:auto;padding:30px 0 0 0;}
#Footer .Content .Panes{padding:0 0 45px 0;}
#Footer #dnn_Footer_LeftPane{width:480px;float:left;margin:0 20px 0 0;}
#Footer #dnn_Footer_RightPane{width:480px;float:left;}
#Footer #dnn_Footer_BottomPane{clear:both;}
#Footer #Copyright{clear:both;height:50px;width:960px;border-top:4px solid #333333;line-height:46px;}
#Footer .Normal{color:#e5e5e5;}
#Footer span.SkinObject{font-weight:normal;color:#666666;}
#Footer a.SkinObject{float:right;font-weight:normal;text-decoration:underline;}
#Footer a.SkinObject:link, #Footer a.SkinObject:active, #Footer a.SkinObject:visited, #Footer a.SkinObject:hover{color:#e5e5e5;padding:0 0 0 15px;}
/* Content */
.Social-Links{text-align:right;padding:15px 0 0 0;}
.Social-Links a{margin:0 0 0 10px;}
.icoIN{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -192px 0;}
.icoFacebook{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat 0 0;}
.icoTwitter{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -32px 0;}
.icoTwitter2{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -576px 0;}
.icoMySpace{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -64px 0;}
.icoStumbleUpon{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -96px 0;}
.icoDigg{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -128px 0;}
.icoFlickr{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -160px 0;}
.icoLinkedIn{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -192px 0;}
.icoYouTube{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -224px 0;}
.icoDelicious{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -256px 0;}
.icoBlogger{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -288px 0;}
.icoRSS{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -320px 0;}
.icoEmail{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -352px 0;}
.icoTumblr{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -384px 0;}
.icoFourSquare{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -416px 0;}
.icoReddit{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -448px 0;}
.icoVimeo{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -480px 0;}
.icoWordPress{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -512px 0;}
.icoBebo{width:32px;height:32px;background:url(images/SocialMedia.png) no-repeat -544px 0;}
/* Right Hand Links */
#RightLinks{margin:0;padding:0;}
#RightLinks li{height:50px;clear:both;list-style-type:none;background:url(images/Horizontal-Sep.jpg) repeat-x left bottom;padding:1em 0;margin:0;}
#RightLinks li img{float:left;height:50px;width:56px;margin:0 15px 0 0;}
#RightLinks li a:link, #RightLinks li a:visited{color:#000;text-decoration:none;}
#RightLinks li a:active, #RightLinks li a:hover{color:#D0171E;text-decoration:none;}
#RightLinks li p{margin:0;line-height:14px;}
#RightLinks li p span{display:block;color:#000;font-size:13px;font-weight:bold;text-transform:uppercase;padding:0 0 2px;font-family:TitilliumText22LBold;font-size:14px;text-shadow: #f7f7f7 1px 1px 1px;}
#RightLinks li.icoMarketplace{background:none;}
#RightLinks li.icoCommunity img{background:url(images/Icons.png) no-repeat -192px 8px;}
#RightLinks li.icoManuals img{background:url(images/Icons.png) no-repeat -250px 0;}
#RightLinks li.icoTraining img{background:url(images/Icons.png) no-repeat -316px 2px;}
#RightLinks li.icoConferences img{background:url(images/Icons.png) no-repeat -376px 0;}
#RightLinks li.icoMarketplace img{background:url(images/Icons.png) no-repeat -444px 0;}
/* Password Information */
#Passwords{margin:2em 0;padding:0;}
#Passwords li{display:inline-block;height:62px;width:305px;background:url(images/Icons.png) no-repeat -256px -64px;margin:0 15px 0 0;padding:0;list-style-type:none;}
#Passwords li.Host{margin:0;}
#Passwords span.SubHead{display:block;color:#FFF;font-size:14px;padding:11px 0 8px 15px;}
#Passwords span.Password{color:#FFF;padding:0 0 0 15px;}
p.Disclaimer{clear:both;color:#666666;font-size:11px;line-height:14px;}
/* Default Over-rides */
#ControlPanelWrapper #dnnCPWrap{filter:none !important;}
/* Modules */
.DnnModule{margin:0 0 2em 0;}
/* Panes - In Layout Mode */
.paneOutline{border:0;}
.paneOutline span.SubHead center{border:1px #ccc dotted;border-left:0;border-right:0;line-height:2.5em;}
#iPopUp{display:none;}
.eipbackimg{z-index:1000;}
/* Fonts */
.Normal{font-size:12px;line-height:16px;}
.SubHead{color:#333;}
/* Language Object */
.language-object { display:inline-block; margin-left: 5px; }
Home.ascx:
<%@ Control language="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="LEFTMENU" Src="~/Admin/Skins/LeftMenu.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" %>
<%@ Register TagPrefix="dnn" TagName="LINKTOMOBILE" Src="~/Admin/Skins/LinkToMobileSite.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.DDRMenu.TemplateEngine" Assembly="DotNetNuke.Web.DDRMenu" %>
<%@ Register TagPrefix="dnn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="CONTROLPANEL" Src="~/Admin/Skins/controlpanel.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
<dnn:STYLES runat="server" ID="StylesIE7" Name="IE7Minus" StyleSheet="ie7skin.css" Condition="LT IE 8" UseSkinPath="true"/>
<div id="DNN6" class="Home">
<div id="Background"></div>
<div id="Header">
<div id="ContentBG">
<div id="ControlPanelWrapper">
<dnn:CONTROLPANEL runat="server" id="cp" IsDockable="True" />
</div>
</div>
</div>
<div id="Content">
<div id="Panes">
<div id="LogoRow">
<dnn:LOGO id="dnnLogo" runat="server" />
<div class="LogoRowRight">
<div id="Login"><dnn:LOGIN ID="dnnLogin" CssClass="LoginLink" runat="server" />|<dnn:USER ID="dnnUser" runat="server" />
<dnn:LANGUAGE runat="server" id="dnnLANGUAGE" showMenu="False" showLinks="True" />
</div>
<div id="SocialMediaPane" runat="server"> </div>
<div class="GFMenuPane">
<div id="MenuPane2" runat="server">
</div>
</div>
</div>
</div>
<div id="ContentPane" class="ContentClass" runat="server"></div>
<div id="LeftPane" runat="server"></div>
<div id="RightPane" runat="server"></div>
<div id="BottomPane" runat="server"></div>
</div>
</div>
<div id="Footer">
<div class="Content">
<div id="Footer_LeftPane" runat="server"></div>
<div id="Footer_RightPane" runat="server"></div>
<div id="Footer_BottomPane" runat="server"></div>
<div id="Copyright"><dnn:COPYRIGHT ID="dnnCopyright" runat="server" /><dnn:TERMS ID="dnnTerms" runat="server" /><dnn:PRIVACY ID="dnnPrivacy" runat="server" /><dnn:LINKTOMOBILE ID="dnnLinkToMobile" runat="server" /></div>
</div>
</div>
</div>
<dnn:DnnJsInclude runat="server" FilePath="jquery.cycle.min.js" PathNameAlias="SkinPath" />
<dnn:DnnJsInclude runat="server" FilePath="DNNMega/jquery.dnnmega.debug.js" PathNameAlias="SkinPath" />
<dnn:DnnCssInclude runat="server" FilePath="DNNMega/dnnmega.css" PathNameAlias="SkinPath" />
<dnn:DnnJsInclude runat="server" FilePath="~/Resources/Shared/Scripts/jquery/jquery.hoverIntent.min.js" />
In case anyone would like to check, the rendered we
a million thanks to anyone who can help,
best
j