Internet Explorer 7.0 Released - HELP!

Okay, so IE7 was officially released today.

I had originally thought I had about another month or two before this happened.

So it took me forever to get IE6 and FF to look the same and now IE7 is looking like IE6 used to. uugghhh!

Basically this is what is happening the main content is sliding up underneath the header.

follow this link and check it out ( a browser cam capture for IE 7 beta 3)

http://www.oldwestgames.com/images/browserdiffs/explorer7.jpg

this is how it used to look in IE6.

So now I have to fix it for IE7

and I have no idea where to start and I'm sure that it will screw the IE6 and FF views which make up the majority of my browser views (according to analytics).

But with the release of IE7 and the emails going out worldwide to upgrade I'm going to start seeing massive views and missing sales.

I really need some help here.

here's a clip from my stylesheet for wrappers and navigation

/*wrappers - page or section containers*/
#mainWrapper { background-color: #fff; background-image: url(/includes/templates/future_zen/images/main_bg_snake.jpg); background-repeat: no-repeat; background-position: left top; text-align: left; width: 806px; vertical-align: top; }

#headerWrapper {
	width:806px;
	}

#contentMainWrapper {
	top: 15px;
	}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

#logoWrapper { background-color: #ffffff; width:800px; height:85px; background-image:none; background-repeat:no-repeat; background-position:left 50%; }

#logoWrapper {
	position: relative;
	top: -8px;
	}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	}
	
	
#navColumnOneWrapper, #navColumnTwoWrapper {
	}

#tagline { padding-top:10px; color:#000000; font-size: 2em; background-position: center 0; text-align : left; vertical-align: middle; }

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
	}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
	margin: 0;
	width: 47%;
	}

.wrapperAttribsOptions {
	margin: 0.3em 0em;
	}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
	margin: 0em;
	font-size: 0.9em;
	}
.navNextPrevList {
	display: inline;
	white-space: nowrap;
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	}
	
	#mainWrapper {
	position: relative; top: 25px;
	}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0;
	background-color: #ffffff;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 806px;
	}

#navMain ul, #navSupp ul, #navCatTabs ul  {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
	}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	white-space: nowrap;
	}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0 0.5em;
	margin: 0;
	color: #900;
	}

#navEZPagesTOCWrapper {
	font-weight: bold;
	float: right;
	height: 1%;
	border: 1px solid #000000;
	}

#navEZPagesTOC ul {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	line-height: 1.5em;
	}

#navEZPagesTOC ul li {
	white-space: nowrap;
	}

#navEZPagesTOC ul li a {
	padding: 0em 0.5em;
	margin: 0;
	}
	
#navMainSearch {
	width: 780px;
	}	

#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
	margin: 0.5em;
	}

#navBreadCrumb { margin-top:16px; font-size: 0.95em; font-weight: bold; background-image: url(/images/mainpage_bg_tr_sm.jpg); background-position: center top; height: 40px; padding: 0.5em 0 0.5em 1.5em; }

#navEZPagesTop {
	background-image:none;
	background-repeat:no-repeat;
	background-position:right bottom;
	font-size: 0.95em;
	font-weight: bold;
	margin: 0;
	padding: 0.5em 0 0.5em 1.5em;
	}
	
#headerWrapper { position:relative; top:25px; background-color: #ffffff; background-image:none; background-repeat:no-repeat; background-position:left bottom; }

#navColumnOne, #navColumnTwo {
	background-color: #fff;
	}

#nav        { color: #fff; font-size: 10px; font-weight: bold; line-height: 1px; background-color: #000; list-style-type: none; list-style-position: outside; margin: -1px 0 0; padding: 0; position: relative; z-index: 1000; top: 0; width: 800px; height: 15px; border-top: 1px solid #000000; border-bottom: 1px solid #000000   }

#nav ul   { color: #fff; font-size: 10px; line-height: 1px; background-color: #000; text-align: center; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1000    }

#nav a  { color: #fff; font-size: 10px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 140%; background-color: #000; text-decoration: none; text-align: center; display: block; z-index: 1000; width: auto; height: auto  }

#nav a:link, #nav a:visited, #nav a:active       { color: #fff; background-color: #000; z-index: 1000 }

#nav a:hover, #nav a:focus     { color: #000; background-color: #9A7664; z-index: 1000 }

#nav li    { text-align: left; z-index: 1000; width: 160px; float: left }

#nav li ul          { background-color: #fff; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }

#nav li ul.leftside          { background-color: #fff; margin-left: -1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }

#nav li ul.rightside           { background-color: #fff; margin-left: 1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }

#nav li ul li   { background-color: #fff; z-index: 1000; width: 159px; border-bottom: 1px solid #000000  }

#nav li ul li a:hover   { z-index: 1000; border-style: none }

#nav li:hover ul, #nav li.sfhover ul     { z-index: 1000; left: auto }

#nav li ul ul      { margin: -16px 0 0 158px; position: absolute; z-index: 1000 }

#nav li ul ul.two_lines      { margin: -31px 0 0 158px; position: absolute; z-index: 1000 }

#nav li ul ul.left_popout     { margin: -31px 0 0 -158px; position: absolute; z-index: 1000 }

#nav li:hover ul ul, #nav li.sfhover ul ul  { z-index: 1000; left: -999em }

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul   { z-index: 1000; left: auto }

/* extra positioning rules for limited noscript keyboard accessibility */

#nav li a:focus + ul   { margin-left: 0; z-index: 1000  }

#nav li li a:focus + ul  { margin-left: 200px; z-index: 1000 }

#nav li li a:focus     { color: #9A7664; background: #000; margin-left: 1000em; z-index: 1000 }

#nav li li li a:focus     { color: #9A7664; background: #000; margin-left: 200px; z-index: 1000 }

#nav li:hover a:focus, #nav li.sfhover a.sffocus     { color: #9A7664; background-color: #000; margin-left: 0; z-index: 1000 }

#nav li li:hover a:focus + ul, #nav li li.sfhover a.sffocus + ul     { color: #9A7664; background-color: #000; margin-left: 10em; z-index: 1000 }

#content {
	clear: left;
	color: #9a7664;
}

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
	vertical-align: top;
	}

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
	/*font-size: 1.2em;*/
	background-image: url(/images/mainpage_bg_tr_sm.jpg); background-repeat: repeat-x; background-position: center top; padding: 0.5em; }

.alert {
	color: #FF0000;
	margin-left: 0.5em;
	}
.advisory {}
.important {
	font-weight: bold;
	}
.notice {}
.rating{}
.gvBal {
	float: right;
	}

.centerColumn{
width: 486px
}
.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
	padding: 0.8em;
	}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP { color: #900; font-size: 12px; text-decoration: none; }

Thanks in advance.

i'll try and give something cool or a donation to anyone who can figure this out.

From the source "old west games"

<div id="logoWrapper">


	
	<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (document.all) { //MS IE
if (window.attachEvent) window.attachEvent("onload", sfHover);
else { //IE 5.2 Mac does not support attachEvent
var old = window.onload;
window.onload = function() { if (old) old(); sfHover(); }
}
}

//--><!]]></script>
<div> /* close this </div>

clydejones:

From the source "old west games"

<div id="logoWrapper">

  <script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (document.all) { //MS IE
if (window.attachEvent) window.attachEvent("onload", sfHover);
else { //IE 5.2 Mac does not support attachEvent
var old = window.onload;
window.onload = function() { if (old) old(); sfHover(); }
}
}

//--><!]]></script>
<div> /* close this </div>

thanks, but

now, even though they look the same but now they look like this...

http://www.oldwestgames.com/images/ff_ie_afterfix.jpg

obviously I had to revert back to my other tpl_header file but I need to find out what's causing the new problem...

more help?

HERE'S THE WHOLE CSS FILE

/* Edited with EditCSS */
/**** LINK-tag style sheet stylesheet.css ****/

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: stylesheet.css 3215 2006-03-20 06:05:55Z birdbrain $
 */

body { margin: 0; font-size: small; color: #000; font-family: Garamond, "times new roman", "Palatino Linotype"; background-color: #fff; }

a img { border-style: none; border-width: medium; }

a:link, #navEZPagesTOC ul li a { color: #900; font-size: 10pt; font-family: Garamond, "times new roman", "Palatino Linotype"; text-decoration: none; }
 
a:visited { color: #900; font-size: 10pt; font-family: Garamond, "times new roman", "Palatino Linotype"; }

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover { color: #900; font-size: 10pt; font-family: Garamond, "times new roman", "Palatino Linotype"; }

a:active { color: #900; font-size: 10pt; font-family: Garamond, "times new roman", "Palatino Linotype"; }

h1 {
	font-size: 1.5em;
	}

h2 {
	font-size: 12px;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
	font-size: 1.1em;
	}

.choose{
	 color: #900; font-size: 12pt; font-family: Garamond, "times new roman", "Palatino Linotype"; text-decoration: none; 
	}

.biggerText {
	font-size: 1.2em;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0.3em;
	}

CODE {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 1em;
	}

FORM, SELECT, INPUT {
	display: inline;
	font-size: 1em;
	margin: 0.1em;
	}

TEXTAREA {
	float: left;
	margin: auto;
	display: block;
	width: 95%;
	}

input:focus, select:focus, textarea:focus {
	background: #fff;
	}

FIELDSET {
	padding: 0.5em;
	margin: 0.5em 0em;
	border: 1px solid #cccccc;
	}

LEGEND {
	font-weight: bold;
	padding: 0.3em;
	}

LABEL, h4.optionName {
	line-height: 1.5em;
	padding: 0.2em;
	}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
	margin: 0.5em 0.3em;
	}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}
	
#logo {
	display:none;
	margin: 40px 0 0 350px;
}

LABEL.inputLabel {
	width: 11em;
	float: left;
	}

LABEL.inputLabelPayment {
	width: 15em;
	float: left;
	}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
	width: 12em;
	float: left;
	}

P, ADDRESS {
	padding: 0.5em;
	}

ADDRESS {
	font-style: normal;
	}

.clearBoth {
	clear: both;
	}

HR {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #9a9a9a;
	}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	padding: 0.2em;
	border: 1px solid #000000;
	}

.messageStackWarning, .messageStackError {
	background-color: #ff0000;
	color: #ffffff;
	}

.messageStackSuccess {
	background-color: #99FF99;
	color: #000000;
	}

.messageStackCaution {
	background-color: #FFFF66;
	color: #000000;
	}

/*wrappers - page or section containers*/
#mainWrapper { background-color: #fff; background-image: url(/includes/templates/future_zen/images/main_bg_snake.jpg); background-repeat: no-repeat; background-position: left top; text-align: left; width: 806px; vertical-align: top; }

#headerWrapper {
	width:806px;
	}

#contentMainWrapper {
	top: 15px;
	}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

#logoWrapper { background-color: #ffffff; width:800px; height:85px; background-image:none; background-repeat:no-repeat; background-position:left 50%; }

#logoWrapper {
	position: relative;
	top: -8px;
	}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	}
	
	
#navColumnOneWrapper, #navColumnTwoWrapper {
	}

#tagline { padding-top:10px; color:#000000; font-size: 2em; background-position: center 0; text-align : left; vertical-align: middle; }

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
	}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
	margin: 0;
	width: 47%;
	}

.wrapperAttribsOptions {
	margin: 0.3em 0em;
	}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
	margin: 0em;
	font-size: 0.9em;
	}
.navNextPrevList {
	display: inline;
	white-space: nowrap;
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	}
	
	#mainWrapper {
	position: relative; top: 25px;
	}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0;
	background-color: #ffffff;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 806px;
	}

#navMain ul, #navSupp ul, #navCatTabs ul  {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
	}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	white-space: nowrap;
	}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0 0.5em;
	margin: 0;
	color: #900;
	}

#navEZPagesTOCWrapper {
	font-weight: bold;
	float: right;
	height: 1%;
	border: 1px solid #000000;
	}

#navEZPagesTOC ul {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	line-height: 1.5em;
	}

#navEZPagesTOC ul li {
	white-space: nowrap;
	}

#navEZPagesTOC ul li a {
	padding: 0em 0.5em;
	margin: 0;
	}
	
#navMainSearch {
	width: 780px;
	}	

#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
	margin: 0.5em;
	}

#navBreadCrumb { margin-top:16px; font-size: 0.95em; font-weight: bold; background-image: url(/images/mainpage_bg_tr_sm.jpg); background-position: center top; height: 40px; padding: 0.5em 0 0.5em 1.5em; }

#navEZPagesTop {
	background-image:none;
	background-repeat:no-repeat;
	background-position:right bottom;
	font-size: 0.95em;
	font-weight: bold;
	margin: 0;
	padding: 0.5em 0 0.5em 1.5em;
	}
	
#headerWrapper { position:relative; top:25px; background-color: #ffffff; background-image:none; background-repeat:no-repeat; background-position:left bottom; }

#navColumnOne, #navColumnTwo {
	background-color: #fff;
	}

#nav        { color: #fff; font-size: 10px; font-weight: bold; line-height: 1px; background-color: #000; list-style-type: none; list-style-position: outside; margin: -1px 0 0; padding: 0; position: relative; z-index: 1000; top: 0; width: 800px; height: 15px; border-top: 1px solid #000000; border-bottom: 1px solid #000000   }

#nav ul   { color: #fff; font-size: 10px; line-height: 1px; background-color: #000; text-align: center; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1000    }

#nav a  { color: #fff; font-size: 10px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 140%; background-color: #000; text-decoration: none; text-align: center; display: block; z-index: 1000; width: auto; height: auto  }

#nav a:link, #nav a:visited, #nav a:active       { color: #fff; background-color: #000; z-index: 1000 }

#nav a:hover, #nav a:focus     { color: #000; background-color: #9A7664; z-index: 1000 }

#nav li    { text-align: left; z-index: 1000; width: 160px; float: left }

#nav li ul          { background-color: #fff; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }

#nav li ul.leftside          { background-color: #fff; margin-left: -1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }

#nav li ul.rightside           { background-color: #fff; margin-left: 1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }

#nav li ul li   { background-color: #fff; z-index: 1000; width: 159px; border-bottom: 1px solid #000000  }

#nav li ul li a:hover   { z-index: 1000; border-style: none }

#nav li:hover ul, #nav li.sfhover ul     { z-index: 1000; left: auto }

#nav li ul ul      { margin: -16px 0 0 158px; position: absolute; z-index: 1000 }

#nav li ul ul.two_lines      { margin: -31px 0 0 158px; position: absolute; z-index: 1000 }

#nav li ul ul.left_popout     { margin: -31px 0 0 -158px; position: absolute; z-index: 1000 }

#nav li:hover ul ul, #nav li.sfhover ul ul  { z-index: 1000; left: -999em }

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul   { z-index: 1000; left: auto }

/* extra positioning rules for limited noscript keyboard accessibility */

#nav li a:focus + ul   { margin-left: 0; z-index: 1000  }

#nav li li a:focus + ul  { margin-left: 200px; z-index: 1000 }

#nav li li a:focus     { color: #9A7664; background: #000; margin-left: 1000em; z-index: 1000 }

#nav li li li a:focus     { color: #9A7664; background: #000; margin-left: 200px; z-index: 1000 }

#nav li:hover a:focus, #nav li.sfhover a.sffocus     { color: #9A7664; background-color: #000; margin-left: 0; z-index: 1000 }

#nav li li:hover a:focus + ul, #nav li li.sfhover a.sffocus + ul     { color: #9A7664; background-color: #000; margin-left: 10em; z-index: 1000 }

#content {
	clear: left;
	color: #9a7664;
}

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
	vertical-align: top;
	}

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
	/*font-size: 1.2em;*/
	background-image: url(/images/mainpage_bg_tr_sm.jpg); background-repeat: repeat-x; background-position: center top; padding: 0.5em; }

.alert {
	color: #FF0000;
	margin-left: 0.5em;
	}
.advisory {}
.important {
	font-weight: bold;
	}
.notice {}
.rating{}
.gvBal {
	float: right;
	}

.centerColumn{
width: 486px
}
.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
	padding: 0.8em;
	}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP { color: #900; font-size: 12px; text-decoration: none; }

/*Shopping Cart Display*/
#cartAdd {
	float: right;
	text-align: center;
	margin: 1em;
	border: 1px solid #000000;
	padding: 1em;
	}

.tableHeading TH {
	border-bottom: 1px solid #cccccc;
	}

.tableHeading, #cartSubTotal {
	background-color: #e9e9e9;
	 }

#cartSubTotal {
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	padding-right: 2.5em;
	}

.tableRow, .tableHeading, #cartSubTotal {
	height: 2.2em;
	}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay   {
	padding: 0.5em 0em;
	}

.cartUnitDisplay, .cartTotalDisplay {
	text-align: right;
	padding-right: 0.2em;
	}

#scUpdateQuantity {
	width: 2em;
	}

.cartQuantity {
	width: 4.7em;
	}

.cartNewItem {
	color: #33CC33;
	position: relative;  /*do not remove-fixes stupid IEbug*/
	}

.cartOldItem {
	color: #660099;
	position: relative;   /*do not remove-fixes stupid IEbug*/
	}

.cartBoxTotal {
	text-align: right;
	font-weight: bold;
	}

.cartRemoveItemDisplay {
	width: 3.5em;
	}

#cartAttribsList {
	margin-left: 1em;
	}

#mediaManager {
width: 50%; 
margin: 0.2em;
padding: 0.5em;
}
.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
	}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
	color: #ff0000;
	}

#cartBoxListWrapper ul, #ezPageBoxList ul {
	list-style-type: none;
	}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
	margin: 0;
	padding: 0.2em 0em;
	} 

.totalBox {
	width: 5.5em;
	text-align: right;
	padding: 0.2em;
	}

.lineTitle, .amount {
	text-align: right;
	padding: 0.2em;
	}

.amount {
	width: 5.5em;
	}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	margin: 0em 1em 1em 0em ;
	}
#productAdditionalImages { display: none; }
.categoryIcon {}
#cartImage {
	margin: 0.5em 1em;
	}

/*Attributes*/
.attribImg {
	width: 20%;
	margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
	margin: 1em 0em;
	}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label { font-size: 12px; color: #fff; background-color: #9a7664; }
	
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover{ color: #fff; font-size: 12px; background-color: #9a7664; text-decoration: none; } 

.leftBoxHeading, .rightBoxHeading { font-size: 12px; margin: 0; background-image:none; background-repeat:no-repeat; padding: 0.5em 0.2em; border: solid 2px #000000;}

.centerBoxWrapper { background-color: #fff; margin: 0; background-image:none; background-repeat:no-repeat; background-position:left top; border: solid 2px #9a7664; height: 1%  }

.centerBoxHeading { color: #fff; font-size: 12px; background-color: #000000; margin: 0; height:25px; background-image:none; background-repeat:no-repeat; background-position:right top; padding: 0.5em 0.2em; border-bottom: 2px solid #9a7664; }

.leftBoxContainer, .rightBoxContainer {
	margin-top: 1.5em;
	}

.sideBoxContent {
	background-image:none;
	background-repeat:no-repeat;
	background-position:50% bottom;
	padding: 0.4em;
	border: solid 2px #000000;
	border-top: solid 0px;
	}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: center;
	}
	
#siteinfoLegal { color: #9A7664; font-weight: bold; background-color: #ffffff; width:806px; }

#bestsellers .wrapper {
	margin: 0em 0em 0em 1.5em;
	}

#bestsellers ol {
	padding: 0;
	margin-left: 1.1em;
	}

#bestsellers li {
	padding: 0;
	margin: 0.3em 0em 0.3em 0em;
	}

#bannerboxHeading {
	background-color: #9a7664; border: solid 2px #000000;
}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

/*misc*/
.back {
	float: left;
	}

.forward {
	float: right;
	}

.bold {
	font-weight: bold;
	}

.rowOdd {
	background-color: #E8E8E8;
	height: 1.5em;
	vertical-align: top;
	}

.rowEven {
	background-color: #F0F0F0;
	height: 1.5em;
	vertical-align: top;
	}

CAPTION {
	/*display: none;*/
	}

#myAccountGen li, #myAccountNotify li {
	margin: 0;
	} 

.accountTotalDisplay, .accountTaxDisplay {
	width: 20%;
	text-align: right;
	/*vertical-align: top*/
	}

.accountQuantityDisplay {
	width: 10%;
	vertical-align: top
	}

TR.tableHeading {
	background-color: #cacaca;
	height: 2em;
	}

#siteMapList {
	width: 90%;
	float: right;
	}

.ratingRow {
	margin: 1em 0em 1.5em 0em;
	}

LABEL#textAreaReviews {
	font-weight: normal;
	margin: 1em 0em;
	}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {
	background-color: #ffffff;
	}

/* Products Listing Adding */
.productListing-odd {
background-color: #fff;
height: 132px; /* the 100px should be greater than the (Image - Product Listing Height 80px) default in Admin */
padding: 0.2em 0;
}

.productListing-even {
background-color: #ebebeb;
height: 132px; /* the 100px should be greater than the (Image - Product Listing Height 80px) default in Admin */
padding: 0.2em 0;
}

.productListing-data {
padding: 0.5em 0.2em 0.5em 0.2em;
border: 1px dotted #E6E6E6;
}

.itemTitle, .listingDescription, {
padding: 0 1.5em 0 0.6em;
text-align: left;
}

Try adjusting the top margin of your logo declaration:

#logo {
display:none;
margin: 40px 0 0 350px;
}

You might also want to make the following adjustments by deleting the parts in red and adding the part in green:

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

#logo {
text-align: center;
display:none;
margin: 40px 0 0 350px;
}

clydejones:

Try adjusting the top margin of your logo declaration:

#logo {
display:none;
margin: 40px 0 0 350px;
}

You might also want to make the following adjustments by deleting the parts in red and adding the part in green:

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

#logo {
text-align: center;
display:none;
margin: 40px 0 0 350px;
}

This is crazy. okay I close the div like you suggested before. then i try the above solutions and nothing happens however if I add a float: right property to the css for the #contentMainWrapper it does move everything that is off center to the right.

http://www.oldwestgames.com/images/ff_ie_afterfix2.jpg

So that has to be a clue however I am an amateur at this whole div positioning thing so do you have another plan of attack?

and thanks for walking me along here...

Another clue might be in the number of validation errors that this site generates. http://validator.w3.org/check?verbose=1&uri=http://www.oldwestgames.com/ The validator seems rather confused about some of your HTML tags. I image the browsers are too.

kuroi:

Another clue might be in the number of validation errors that this site generates. http://validator.w3.org/check?verbose=1&uri=http://www.oldwestgames.com/ The validator seems rather confused about some of your HTML tags. I image the browsers are too.

Whoa!

Yeah I needed that desperately. I fixed everything surprisingly.

Right before you wrote the above reply I had found that the tpl_main_page in the includes/templates/my_template/common/ folder had some empty paragraph tags in it.
strangely enough I was able to replace them with

<br /><br /><br /><br /><br /><br />
```  which the W3C validation service doesn't like at all 

> Error  Line 152, column 11: document type does not allow element "br" here; missing one of "th", "td" start-tag .
> 
>   <tr><br /><br /><br /><br /><br /><br />
> 
> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
> 
> One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

however IE7 ate it up and Firefox handled it beautifully.

Here is my tpl_main_page code if anyone is interested in helping me solve this and please the validator

<?php /** * Common Template - tpl_main_page.php * * Governs the overall layout of an entire page<br /> * Normally consisting of a header, left side column. center column. right side column and footer<br /> * For customizing, this file can be copied to /templates/your_template_dir/pagename<br /> * example: to override the privacy page<br /> * - make a directory /templates/my_template/privacy<br /> * - copy /templates/templates_defaults/common/tpl_main_page.php to /templates/my_template/privacy/tpl_main_page.php<br /> * <br /> * to override the global settings and turn off columns un-comment the lines below for the correct column to turn off<br /> * to turn off the header and/or footer uncomment the lines below<br /> * Note: header can be disabled in the tpl_header.php<br /> * Note: footer can be disabled in the tpl_footer.php<br /> * <br /> * $flag_disable_header = true;<br /> * $flag_disable_left = true;<br /> * $flag_disable_right = true;<br /> * $flag_disable_footer = true;<br /> * <br /> * // example to not display right column on main page when Always Show Categories is OFF<br /> * <br /> * if ($current_page_base == 'index' and $cPath == '') {<br /> * $flag_disable_right = true;<br /> * }<br /> * <br /> * example to not display right column on main page when Always Show Categories is ON and set to categories_id 3<br /> * <br /> * if ($current_page_base == 'index' and $cPath == '' or $cPath == '3') {<br /> * $flag_disable_right = true;<br /> * }<br /> * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 * @version $Id: tpl_main_page.php 3721 2006-06-07 03:19:12Z birdbrain $ */ // the following IF statement can be duplicated/modified as needed to set additional flags if (in_array($current_page_base,explode(",",'list_pages_to_skip_all_right_sideboxes_on_here,separated_by_commas,and_no_spaces')) ) { $flag_disable_right = true; } $header_template = 'tpl_header.php'; $footer_template = 'tpl_footer.php'; $left_column_file = 'column_left.php'; $right_column_file = 'column_right.php'; $body_id = str_replace('_', '', $_GET['main_page']); ?> <body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>> <?php if (SHOW_BANNERS_GROUP_SET1 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET1)) { if ($banner->RecordCount() > 0) { ?> <div id="bannerOne" class="banners"><?php echo zen_display_banner('static', $banner); ?></div> <?php } } ?> <div id="mainWrapper"> <?php /** * prepares and displays header output * */ require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');?> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper"> <tr><br /><br /><br /><br /><br /><br /> <?php if (COLUMN_LEFT_STATUS == 0 or (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '')) { // global disable of column_left $flag_disable_left = true; } if (!isset($flag_disable_left) || !$flag_disable_left) { ?> <td id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>"> <?php /** * prepares and displays left column sideboxes * */ ?> <div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?></div></td> <?php } ?> <td valign="top"> <!-- bof breadcrumb --> <?php if (DEFINE_BREADCRUMB_STATUS == '1') { ?> <div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div> <?php } ?> <!-- eof breadcrumb --> <?php if (SHOW_BANNERS_GROUP_SET3 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET3)) { if ($banner->RecordCount() > 0) { ?> <div id="bannerThree" class="banners"><?php echo zen_display_banner('static', $banner); ?></div> <?php } } ?> <?php /** * prepares and displays center column * */ require($body_code); ?> <?php if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) { if ($banner->RecordCount() > 0) { ?> <div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div> <?php } } ?></td> <?php if (COLUMN_RIGHT_STATUS == 0 or (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '')) { // global disable of column_right $flag_disable_right = true; } if (!isset($flag_disable_right) || !$flag_disable_right) { ?> <td id="navColumnTwo" class="columnRight" style="width: <?php echo COLUMN_WIDTH_RIGHT; ?>"> <?php /** * prepares and displays right column sideboxes * */ ?> <div id="navColumnTwoWrapper" style="width: <?php echo BOX_WIDTH_RIGHT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_right.php')); ?></div></td> <?php } ?> </tr> </table> <?php /** * prepares and displays footer output * */ require($template->get_template_dir('tpl_footer.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_footer.php');?> </div> <!--bof- parse time display --> <!--eof- parse time display --> <!--bof- banner #6 display --> <?php if (SHOW_BANNERS_GROUP_SET6 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET6)) { if ($banner->RecordCount() > 0) { ?> <div id="bannerSix" class="banners"><?php echo zen_display_banner('static', $banner); ?></div> <?php } } ?> <!--eof- banner #6 display --> </body> ```

Anyways, it took a while and it was a dirty little fix but all in all it worked and crisis averted.

thanks for all your help clydejones and kuroi.

still wondering if anyone might have a solution to my problem. While it looks passable in Firefox and IE7, now there is a crap load of white space under my header in IE6.

Please is there anyone who has any idea how to make this look homogeneous across those three browsers?

I have experienced a similar problem with a site of mine. I had just upgraded the site that had been running on v 1.2.5. In converting to 1.3.5 I took the opportunity to develop a fluid width, centered layout - at least that's what it is in compliant browsers. I also got rid of all the layout tables so that the layout is all controlled by CSS allowing me to put the main content BEFORE the left and right columns in the document flow. The idea is that search engines get to the main content first and hopefully rank the site higher on content relevance.

Anyway all of the above is reasonably easy to do for Firefox, Opera etc but with good old IE6 I needed to compromise on the fluid width and introduce some hacks to get the layout perfect and get rid of the peekaboo bug. I just got everything working OK in Firefox, Opera, Netscape and good old IE6, went live with the new version on Tuesday 19th October 2006 and Bill Gates & co, with impeccable timing, released IE7 on Wednesday 20th October 2006!

In IE7 the header of my beautiful site had dissappered and the left column had dissappeared out left field.

The problem is that, in their infinite wisdom, MS have fixed the bug that in IE6 allowed us to write hacks that only IE could see using * html to preface any definition we wanted IE6 to see but all other browsers to ignore, but have not fixed the non compliance issues that require the fixes in the first place. The result is that all our precious * html hacks which IE7 needs are completely ignored by IE7.

So how do we fix this?

Well since IE5 there has been a perfectly workable work around which seems to have been ignored by most (including me). Any stylesheet link enclosed by the following two pieces of code:

<!--[if IE]>

and

<![endif]-->

will be ignored by all browsers except IE5, IE6 and IE7. For example:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="includes/templates/my_template/css/ie_stylesheet.css" />
<![endif]-->

here '.../ie_stylesheet.css' will be read by IE5, 6 or 7 but not by any other browser. Any code targeted specifically at IE should therefore be placed in this stylesheet, which in turn should be placed after the main '.../'stylesheet.css' in the document flow.

What's more the targeting can even be version specific using

<!--[if IE5]>

to target IE5. Just change '5' to the version number you want to target.

How does this work in practice? For my own site I had several * html hacks. What I did was this.

1. I created a new blank stylesheet in the includes/templates/my_template/css folder called 'ie_stylesheet.css' and uploaded this to my server.

2. I modifed includes/templates/template_default/common/html_header.php

I found this at lines 44-50:

* load all template-specific stylesheets, named like "style*.css", alphabetically
 */
  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^style/', '.css');
  while(list ($key, $value) = each($directory_array)) {
    echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
  }
/**

I added the following code immedialtely below it at line 51

 * load all template-specific stylesheets, named like "ie_*.css", alphabetically
 * for stylesheets targeted at all versions of IE
 */
  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^ie_/', '.css');
  while(list ($key, $value) = each($directory_array)) {
    echo '<!--[if IE]>' . "\n";
	echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />' . "\n";
	echo '<![endif]-->' . "\n";
  }  
/**

I saved the file, uploaded it to my server and navigated to my site and on viewing the source code found the following in the head of the document:

<link rel="stylesheet" type="text/css" href="includes/templates/rcm/my_template/style_imagehover.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/my_template/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/my_template/css/stylesheet_css_buttons.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="includes/templates/my_template/css/ie_stylesheet.css" />
<![endif]-->

So I now had a stylesheet that was only visible to IE5, IE6 and IE7.

I now opened includes/templates/my_template/stylesheet.css and copied all of my * html hacks to my new .../ie_stylesheet.css. I did this by using my editors search facility, searching for '* html', copying the relevant section of code and pasting it into my new ie_stylesheet.css document. Of course I removed '* html' from the code placed in ie_stylesheet.css

For example I copied

/* IE doesn't understand min and max widths so for IE only set fixed width. */
* html #mainWrapper {
	width: 76em;	
	height: 1%;	
	} 

in .../stylesheet.css to .../ie_stylesheet.css and removed '* html' so that the code in .../ie_stylesheet.css became:

/* IE doesn't understand min and max widths so for IE only set fixed width. */
#mainWrapper {
	width: 76em;	
	height: 1%;	
	} 

I then uploaded .../ie_stylesheet.css to my server and tested the result in various browsers including IE7.

I repeated the above for each * html hack I found in my main stylesheet, uploading and testing after each change. Bit by bit I started to see my site beginning to appear as it should in IE7 while it remained perfect in all other browsers.

Once I had completed copying all my hacks across to .../ie_stylesheet.css I had a site that continued to display correctly in Firefox, Opera, Netscape and IE6 and now also displayed correctly in IE7.

I then revisited my .../stylesheet.css and commented out all of my * html hacks. These will now be found by IE in .../ie_stylesheet.css. Just to be sure I re-tested after each * html hack had been commented out.

So far I have not found a need for code that is specific to a particular version of IE but just in case it is ever needed (what's the betting thet IE7 has some quirks of it's own?) I revisited includes/templates/template_default/common/html_header.php and added the following at line 61 immediately below the code I had added previously as described above.

 * load all template-specific stylesheets, named like "ie7*.css", alphabetically
 * for stylesheets targeted at specific versions of IE
 */
  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^ie[5-9]_/', '.css');
  while(list ($key, $value) = each($directory_array)) {
	$ver = substr ($value, 2, 1);
    echo '<!--[if IE' . $ver . ']>' . "\n";
	echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />' . "\n";
	echo '<![endif]-->' . "\n";
  }  
/**

Now if I need to target code at a specific version of IE I would place a new stylesheet in includes/templates/my_template/css folder as folows:

ie5_stylesheet.css - for IE5
ie6_stylesheet.css - for IE6
ie7_stylesheet.css - for IE7

Similarily for IE8 and IE9 if and when they ever come along.

If you want to see the above in action have a look here:

http://www.ritchiechristianmedia.co.uk

I hope this helps anyone who is finding their sites are not displaying properly in IE7.

Regards,

Alan

duncanad:

I hope this helps anyone who is finding their sites are not displaying properly in IE7.

Regards,

Alan

Thanks for that Alan. I'm not sure if I can use that for this problem but it's good to know that version specific stylesheets are possible for IE. It's actually quite brilliant. Thanks again. mafiasam

Wow somebody should sticky this or lift out the explaination by duncanad and put it in the tutorials.

Mafiasam,

I had noticed that you had not used any * html hacks in your CSS but however you are targetting your IE6 fixes the principle is the same. What you need to do is write compliant CSS to produce your desired layout in compliant browsers such as Firefox and place this in your main 'stylesheet.css' file. Once your site is looking as you want it to you then address the layout errors produced by IE by placing any specific CSS required to make IE behave itself in your 'ie_stylesheet.css' file.

Regards,

Alan

Grantc,

Well spotted - although I was nearl blearie-eyed trying to spot the difference. Just in case anyone else can't spot it there is a space between IE and the following apostrophe in the correct version. The link to IE versioned stylesheets should be as follows:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="includes/templates/my_template/css/ie6_stylesheet.css" />
<![endif]-->

There should be a space between IE and the version number in the conditional statement otherwise it won't work hence the need for the space in the code. My apologies to anyone who has suffered grief as a result of this error.

If I was picky I would point out that you have forgotten the space in your 'whole chunk' but as I'm not I won't ;-)

A rare example of Weegies and Burgers co-operating!

Regards,

Alan

Alan's approach has now been packaged up and made available as a downloadable module.

kuroi:

Alan's approach has now been packaged up and made available as a downloadable module.

Thank you kuroi!!!

One question though...how do we know which styles that we need to add to the IE stylesheets?

thank you,

betty

Betty,

My post here:

http://www.zen-cart.com/forum/showpost.php?p=282393&postcount=9

explains why this is necessary.

As to when it is necessary and which bits of CSS need to be scripted specifically for Internet Explorer the answer is, depending on your template layout, perhaps never. But if you need to you will know if you test your site properly.

The important thing is that you write standards compliant CSS in your main stylesheet and test your site in as many of the popular browsers as you can. Personally I test in IE6, IE7, Firefox, Netscape and Opera. If your site looks as it should in all these browsers you don't have a problem. The browsers you are most likely to have a problem with are IE6 and IE7 - and don't assume because it works in IE6 it will work in IE7 - it aint necessarily so.

If you find that there is a problem in IE (most likely the peek-a-boo bug) then you need to identify the CSS that IE doesn't understand properly and write some CSS that it does. It is this IE specific CSS (and only this CSS) that needs to be placed in your ie_stylesheet. Browsers read your stylesheets in order so your main stylesheet will be read first and then IE will read the ie_stylsheet (other browsers will ignore it). Browsers follow the last instruction given so IE will follow the ie_stylesheet where this contradicts anything in the main stylesheet.

Hope this helps

Alan

Thank you for the excellent explanation Alan.

What my problem is that I only know how to make the css complaint with IE 6 and 7. I do look at the page in Firefox, but when it looks awful, I have no idea why. :cry:

So I guess I was hoping if I could find out what is specific to IE 6 and 7, then I would know what it is that "breaks" the appearance of the page in Firefox.

I have the developer tools and several other add-ons in firefox, but thus far either I haven't figured out how to use them properly or they don't help with the issues in the css. I don't know which it is.

thank you again,

betty

Have you got an URL where I can see an example of a page that is OK in IE and broken in Firefox?

To use Firefox to validate code open the page you wish to check in Firefox:

Click on 'Tools' on the Developer's Toolbar.

Click on 'Validate HTML' to check your HTML. Sort any errors reported before checking anything else.

Click on 'Validate CSS' to check your CSS. Sort any errors reported.

Click on 'Validate WAI' to check accessibility. Sort any errors reported.

If you don't understand what the errors are - look them up. A great tool for learning as well as picking up small errors that might otherwise be missed.

Since Firefox is the most compliant browser if you get your page to look as it should in Firefox, with no errors in HTML or CSS, it should pretty much look OK in any browser - with the exception of some quirky issues with IE. Which is where the IE_stylesheet comes in.

Regards,

Alan

I definitely have a storefront that looks ok in IE7 and looks absolutely horrible in Firefox. A client I've done a few other stores for basically dared me to take a template he bought and make a Zencart store from it.

I thought I was pretty cocky in that I got it to show up ok in IE, however when I looked at in in Firefox, I gave up.

I still have it online:

http://www.forwardmotionconcepts.com/nusoul/index.php

thank you,

betty

Betty,

I've had a look at your page in Firefox and yes the layout is not as you would expect.

Open this page in Firefox. Now click 'Tools' and 'Validate HTML' on the Firefox Developer's Toolbar. There are four HTML errors. My guess is if you fix these errors things will look a whole lot better in Firefox and will still look OK in IE. For all the criticisms of IE as being one of the least standards compliant browsers it can sometimes be one of the most tolerant of HTML errors which may be why in IE your page looks OK but in Firefox it doesn't.

Alan