The days of "designing for IE6 is good enough" are just over, I guess. I've worked with DNN since verison 2, but I am feeling like a total newbie here. So, throwing my pride to the wind and without crying anymore in my beer, I will dive in.
I tired using the new CSS template in 4.9.0 for the project I am working on - it may be in a state of flux as I continue to try and resolve the issues, but it can be found here: http://www.myesperanza.org/portal/sandbox. You will notice I now have tables ... I found making parallel columns was simply too easy to break, with right column content slipping down the page, so I will leave that battle for another day. here's the issue now - simple it seems.
I need a home page (or splash page) that is slightly different than the inside pages. I want to a) drop the breadcrumb, b) have a background picture displayed on the home page that buts to the top-right corner of the content area under the header banner. So I created my inside page first and got it working perfectly in both FF and IE6. Then I copied the page to a new file name, commented out the code for the breadcrumb, and added the picture. In FF both pages work without flaw. I set the site to use the inside page, then set the homepage to use the "homepage" version. The problem is that in IE6 on the home page the entire body of content is slammed to the left margin. I then tried recopying the ordiginal to make sure I did not mess something up in the editing, but got the saem result. I re-copied again, and this time I removed the block for the breadcrumb since I have noticed that HTML comment blocks themselves can sometimes act funny, depending on what preceeds, follows, or is inside. Then I tried leaving the blok in tact and setting it to style="display: none;", and several other methods. But regardless of how I attmempted to make the change, in every case IE6 pushed the content left when thso file was selected for either the homepage or the default page.
I even tried making the homepage the Norm, and setting inside pages to the copy with the breadcrump and no background picture. Again, IE6 pushed everything leftward.
My current itteration simply uses a single page WITH breadcrumb, and places the picture inside a text/html module with a position style in both the skin.css, and an overrides in the ie6skin.css, since positioning for each is a few pixels different. With this solution, IE6 is the winner, becasue in FF, the module boundry clips the picture, leaving a gap between the picture top and the bottom of the header banner.
I would be most greatful for any insight. My most preferred solution would be a two page method becasue if I can get it working I will also make a few other minor differences between the home page and inside pages. And to anticipage an obvious question, the pages did exactly the saem thing before I inserted the tabels.
Here's the inside page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="skin.css" />
</head>
<body>
<div>
<div id="ControlPanel" runat="server" />
<div class="template_style">
<div class="logo_pad">
</div>
<div id="ContentBody">
<table id="tbl_body_content" border="0" cellpadding="0" cellspacing="0" height="100%" width="792">
<tr>
<td id="cell_nav" height="0"><img src="images/spacer.gif" height="1" width="192"></td>
<td id="cell_body_content" rowspan="3" valign="top">
<!-- Breadcrumb only on inside bages -->
<div class="bread_bg">
<div id="bread_style">
[TEXT]: <span>[BREADCRUMB]</span> </div>
<div class="clear_float"> </div>
</div>
<!-- End Breadcrumb -->
<div class="center_bg">
<div class="left_bg">
<div class="right_bg">
<div class="content_pad">
<div class="content_width">
<table height="90%" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="TopPane" class="TopPane" runat="server" colspan="3"
visible="false"> </td>
</tr>
<tr>
<td valign="top" id="LeftPane" class="LeftPane" runat="server" visible="false"> </td>
<td valign="top" id="ContentPane" class="ContentPane" runat="server" visible="false"> </td>
<td valign="top" id="RightPane" class="RightPane" runat="server" visible="false"> </td>
</tr>
<tr>
<td valign="top" id="BottomPane" class="BottomPane" runat="server" colspan="3"
visible="false"> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div> </td>
</tr>
<tr>
<td id="cell_nav" valign="top">
<div class="menu_style">
<div class="menu_bg">
[NAV]
</div>
</div> </td>
</tr>
<tr>
<td id="cell_nav" valign="top">
<div id="left_menu_content">
<table height="100%" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="MenuPane" class="MenuPane" runat="server" visible="false"></td>
</tr>
</table>
</div>
<div class="search_style">
<div class="search_bg">
[SEARCH] </div>
</div>
<div id="login_style" class="user">
[USER] | [LOGIN] </div> </td>
</tr>
<tr>
<td id="cell_nav" height="100%">
<div class="menu_style">
<div id="church_location">
Esperanza Lutheran Church<br />
2601 East Thunderhill Place<br />
Phoenix, AZ 85048<br />
Phone: 480-759-1515 </div>
</div> </td>
<td valign="bottom"><img id="ELCA_Logo" src="ELCA_Logo_MonoChrome.gif" width="345" height="44"
alt="Evengelical Luteran Church in America" /></td>
</tr>
</table>
</div>
<div class="clear_float">
</div>
</div>
</div>
</div>
<div class="bot_pad">
<div id="terms_style" class="footer">[PRIVACY] | [TERMS]</div>
<div id="copy_style" class="footer">[COPYRIGHT]</div>
<div class="footer" align="center" id="host_credit"><a href="http://www.YBOTI.com"
title="YBOTI Web Design - 480-221-6792 - www.yboti.com" target="_blank">
Hosting by <img src="images/ybotiSmall.gif" border="0" align="middle"
alt="YBOTI Web Design - 480-221-6792 - www.yboti.com"></a>
</div>
</div>
[STYLES]
</div>
</body>
</html>
And the Home Page version:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="skin.css" />
</head>
<body>
<div>
<div id="ControlPanel" runat="server" />
<div class="template_style">
<div class="logo_pad">
</div>
<div id="ContentBody">
<table id="tbl_body_content_home" border="0" cellpadding="0" cellspacing="0" height="401" width="792">
<tr>
<td id="cell_nav" height="0"><img src="images/spacer.gif" height="1" width="192"></td>
<td id="cell_body_content" rowspan="3" valign="top">
<!-- End Breadcrumb -->
<div class="center_bg">
<div class="left_bg">
<div class="right_bg">
<div class="content_pad">
<div class="content_width">
<table height="90%" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="TopPane" class="TopPane" runat="server" colspan="3"
visible="false"> </td>
</tr>
<tr>
<td valign="top" id="LeftPane" class="LeftPane" runat="server" visible="false"> </td>
<td valign="top" id="ContentPane" class="ContentPane" runat="server" visible="false"> </td>
<td valign="top" id="RightPane" class="RightPane" runat="server" visible="false"> </td>
</tr>
<tr>
<td valign="top" id="BottomPane" class="BottomPane" runat="server" colspan="3"
visible="false"> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div> </td>
</tr>
<tr>
<td id="cell_nav" valign="top">
<div class="menu_style">
<div class="menu_bg">
[NAV]
</div>
</div> </td>
</tr>
<tr>
<td id="cell_nav" valign="top">
<div id="left_menu_content">
<table height="100%" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="MenuPane" class="MenuPane" runat="server" visible="false"></td>
</tr>
</table>
</div>
<div class="search_style">
<div class="search_bg">
[SEARCH] </div>
</div>
<div id="login_style" class="user">
[USER] | [LOGIN] </div> </td>
</tr>
<tr>
<td id="cell_nav" height="100%">
<div class="menu_style">
<div id="church_location">
Esperanza Lutheran Church<br />
2601 East Thunderhill Place<br />
Phoenix, AZ 85048<br />
Phone: 480-759-1515 </div>
</div> </td>
<td valign="bottom"><img id="ELCA_Logo" src="ELCA_Logo_MonoChrome.gif" width="345" height="44"
alt="Evengelical Luteran Church in America" /></td>
</tr>
</table>
</div>
<div class="clear_float">
</div>
</div>
</div>
</div>
<div class="bot_pad">
<div id="terms_style" class="footer">[PRIVACY] | [TERMS]</div>
<div id="copy_style" class="footer">[COPYRIGHT]</div>
<div class="footer" align="center" id="host_credit"><a href="http://www.YBOTI.com"
title="YBOTI Web Design - 480-221-6792 - www.yboti.com" target="_blank">
Hosting by <img src="images/ybotiSmall.gif" border="0" align="middle"
alt="YBOTI Web Design - 480-221-6792 - www.yboti.com"></a>
</div>
</div>
[STYLES]
</div>
</body>
</html>
Now here's the CSS
@import url("css/menu.css");/* CSS Document */
body {background:#FFF url(images/body_bg.png) repeat-x top left; height:100%; margin:0px; padding:0px; }
/*-------- Default Style --------*/
th,td,div{color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal; }
a,a:link,a:visited,a:active{color:#4F839F; text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal; }
a:hover{color:#C00; text-decoration:none; }
/*-------- design style --------*/
.template_style{width:792px; margin:auto; margin-top: 20px; padding: 2px; border: solid 1px #d3c9c0; height: auto; background-color: #fff;}
.top_space{height:34px;}
.lang_pad{padding:7px 35px 0px 0px;}
/*
.logo_top_left{padding:0px; margin:0 0 0 0;}
.logo_top_right{padding:0px; margin:0px;}
.logo_top_bg{padding:0px; margin:0;}
.logo_left{padding:0px; }
.logo_right{padding-right: 0; }*/
.logo_pad{background:#FFF; margin: 0 0 0 0; padding:0 ;height:138px; width:: 792px; background-image: url(images/Esperanza_Header.jpg); background-repeat: no-repeat;}
#ContentBody {width=792px;}
/*.menu_left{ padding: 0 0 0 3px; height: auto; background-color: #345d65; width: 198px; height: 100%; float: left;}
.menu_right{ }*/
.menu_style{padding:8px 2px 4px 5px; height: auto; background-color: #345d65; width: 192px; height: 100%;}
.menu_bg{margin: 0 0 0 0;}
.search_style{padding:8px 0px 5px 0px; background-color: #345d65;}
.search_bg{padding-right:2px;}
.search_bg Input{color: #43494D;}
.menu_style{float:left;}
/*.bread_right{padding:0px; }
.bread_left{padding:0px; margin:0px;}*/
.bread_bg{padding:0px; margin: 0; height:34px; width: 575px; max-width: 580px;}
#bread_style{padding:2px 0px 0px 0px; color:#000000; font-size:10px; }
#login_style{ }
.center_bg{padding:0px 0 0 3px; margin:0px; float: right; width: 575px; max-width: 580px; overflow: hidden;}
.left_bg{padding:0px; margin:0px; }
.right_bg{padding:0px; margin:0px; }
.content_pad{/*padding:10px 22px 10px 22px; margin: 0 19px 0 7px;*/}
.bot_left{padding:0px; margin:0px; background:url(images/bot_left.png) no-repeat top left;}
.bot_right{padding:0px; margin:0px; background:url(images/bot_right.png) no-repeat top right; padding:0px 39px 0px 27px;}
.bot_bg{padding:0px; margin:0px; background:url(images/bot_bg.png) repeat-x top left; height:41px;}
.bot_pad{margin: auto; margin-bottom:20px; margin-top: 10px; padding:15px 5px 0 5px; width: 780px;}
#terms_style{float:left; max-width: 200px;}
#copy_style{float:right; max-width: 200px;}
.clear_float{clear:both;}
/*--------- pane style ----------*/
.ContentPane, .TopPane, .BottomPane{ padding:0px; margin:0px; }
.LeftPane{ padding:0px 10px 0px 0px; width:10em; margin:0px; }
.RightPane{ padding:0px 0px 0px 10px; width:10em; margin:0px; }
/*------------ Breadcrumb Style --------------*/
.Breadcrumb,a.Breadcrumb:link,a.Breadcrumb:active,a.Breadcrumb:visited{ color:#4F839F; font-size:13px; }
a.Breadcrumb:hover{color:#C00;}
/*-------------- Link Style --------------*/
.links {text-align:center;}
.links,a.links:link,a.links:active,a.links:visited{ font-weight:bold; color:#4F839F; font-size:11px; text-transform:uppercase; }
a.links:hover{color:#C00;}
/*-------------- User Style --------------*/
.user,a.user:link,a.user:active,a.user:visited { color:#B09F8F; font-size:12px; margin: 5px 0 8px 0; padding: 5px 0 15px 0; border-top: solid 1px #234c54; border-bottom: solid 1px #234c54;}
a.user:hover{color:#C00;}
/*-------------- Footer Style --------------*/
.footer,a.footer:link,a.footer:active,a.footer:visited { color:#4F839F; font-size:12px;}
a.footer:hover{color:#C00;}
/*-------------- Search SkinObject Styles --------------*/
div.SearchContainer{position:relative;}
div.SearchBorder{ height: 20px; border: solid 1px #e0e0e0; background-color: #efefef; margin-top: 2px; width: 143px;}
div.SearchContainer a{padding: 0px 0px; position:relative; top: -22px; float:right;} /* Action object */
div.SearchIcon{float: left; width: 31px; height: 20px; cursor: pointer; z-index: 11; background: no-repeat 2px 2px; text-align:right;}
div.SearchIcon img{margin-top: 3px;}
input.SearchTextBox{z-index: 10; border: 0px; width:105px; height:18px; margin-left:3px; border: solid 1px #eef;} /* Input Box */
#SearchChoices{clear: both; display: none; border: solid 1px #C3D4DF; z-index: 2000; cursor: pointer; margin: 0; padding: 0; text-align:left; font-size:12px; background-color: #F3F7FA; float: left; }
#SearchChoices li{cursor: pointer; margin: 0; padding: 2px 2px 0 2px; padding-left: 25px; height: 18px; text-align:left; background-color: #F3F7FA; background-repeat: no-repeat; background-position: 2px center; list-style: none; list-style-image: none; border: none; display:block;}
#SearchChoices li.searchHilite{background-color: #CE0D0D; color:#ffffff; border: none;}
#SearchChoices li.searchDefault{background-color: #F8FAFF; border: none;}
/* Custom Styles */
#church_location{ font-size: 10px; color: #fff; margin: 0 0 5px 0px;}
#ELCA_Logo{margin: 5px 0 5px 10px;}
#left_menu_content{color: #ffffff;}
#left_menu_content.Head{color: #ffffff;}
#left_menu_content.a,#left_menu_content.a:link,#left_menu_content.a:visited,#left_menu_content.a:active{color: #dfdfdf;font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal; }
#left_menu_content.a:hover{color:#C00;}
#cell_nav{background-color: #345d65;}
#tbl_body_content_home{background: url(images/HomePageColloge.jpg); background-position: top right; background-repeat: no-repeat; min-height: 401px;}
#host_credit,host_credit.a:link,#host_credit.a:active,#host_credit.visited{text-decoration: none; font-size: 9px; margin: 2 5 2 5; width: 125px; font-weight: bold; text-align: center; margin: auto;}
a.host_credit:hover{color: #FF3333;}
#CollogeOfHope{position: relative; top: -115px; right: -185px; z-index: 2000;}
/* GENERAL */
/* style for module titles */
.Head { font: "Times New Roman", Times, serif; font-size: 18px; color: #345d65; font-weight: bold;
}
/* style of item titles on edit and admin pages */
.SubHead { font: Arial, Helvetica, sans-serif 16px #345d65;
}
/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {font: Arial, Helvetica, sans-serif 12px #345d65;
}
/* text style used for most text rendered by modules */
.Normal,.p
{font: Arial, Helvetica, sans-serif;
}
And finally the IE6 CSS (Unchanged)
/*--------- IE overrides with .gif backgrounds style ----------*/ .logo_top_left{padding:0px; margin:0px;} .logo_top_right{padding:0px; margin:0px;} .logo_left{padding:0px; } .logo_right{padding:0px; } .menu_left{padding:0px; } .menu_right{margin:0px; } .bread_left{padding:0px;} .bread_right{padding:0px;} .left_bg{padding:0px; } .right_bg{padding:0px;} .bot_left{padding:0px;} .bot_right{padding:0px; } .bot_bg{padding:0px;}
As a PS, I also tried copying the working version of my skin.html and only adding the reference to the background picture. It prefeormed exactly as the other attempts.
Any help would be greatly appreciated.