Firefox issues

[fotofx]

I am ripping my hair out over a strange Firefox issue. The cart looks fine in Internet Explorer and the CSS validates when checked. In Firefox my center section ofsets to the right. I seem to recall this issue previously on another cart but don't remember the fix. Can anyone take a look and let me know what you think is causing it?

Thanks
Steve

http://store.bakersstongo.com

[kobra]

First NEVER design in IE. IE is stupid and will not let you know when you have made a mistake many times.

You have removed your header from being contained inside of the mainWrapper and I do not see a good reason for this in your design
You have many widths defined that look to be un necessary

[yellow1912]

For now, rule of thumb is to design for FF, then fix for IE

FF provides a huge range of tool for your designing purpose, and they are all free. Cant say the same thing for IE.

[frank18]

I agree with kobra and yellow - IE is

Looked at your site in IE 6 (never bothered upgrading to IE 7 for reasons stated above) and the center section is wider than the header.

The footer ligns up ok on the LHS but is shorter than the center section on the RHS.

If you follow kobra's advice then you should be ok.

Frank

[fotofx]

Yup... Learned my lesson.. Will do as Kobra suggested and design in Firefox from now on.. Any thoughts on how to fix the existing mess so I don't have to take it all apart again?

Steve

[lalakerman]

My website works perfect in Firefox but for some reason the backround image on top of my page wont align in Internet Explorer?
Can someone help?

My page is JuJuDeals.com

the stylesheet.css is:

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #000000;
	background:#FF5A00 url(../images/pagebg.gif) repeat-y center;
	}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #D42C00;
	text-decoration: none;
	}
 
a:visited {
	color: #D42C00;
	text-decoration: none;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navCatTabs ul li a:hover {
	color: #D42C00;
	text-decoration: underline;
	}
#navSupp ul li a:hover {
 	color:#D42C00;
	text-decoration: underline;
}

a:active {
	color: #0000FF;
	}

h1 {
	font-size: 1.5em;
	color: #D42C00;
	}

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

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

.biggerText {
	font-size: 1.2em;
	}

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

/*  Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
	position: relative;
	}
*html .centerColumn {
	height: 1%;
	}
*/

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: #E4FEF5;
	}

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;
	}

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

LABEL.inputLabelPayment {
	width: 14em;
	float: left;
	padding-left: 2.5em;
	}

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

#checkoutPayment LABEL.radioButtonLabel {
	font-weight: bold;
	}

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 #9a9a9a;
	}

.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: #ffffff;
	text-align: left;
	width: 900px;
	vertical-align: top;
	}

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

#topBar{
        margin-left: auto; 
        margin-right: auto;
        background-repeat: no-repeat;
        width:918px;
		height:52px;
        color:#ffffff;
        font-weight:bold;
        padding: 0em;
		border: 0em;
		
	}
	
	#topBarWrap{
	height:52px;
	background:#FF5A00 url(../images/topbg.gif) no-repeat center center;
	background-size:100%;
	background-position:center;
	color:#ffffff;
	padding:0em;
	border:0em;
	margin:0em;
	horizontal-position:center;
	}
.topBox{
	float:center;
	padding: 0em;
	height:3em;
	}
#lang_header{
	border-right:1px solid #9a9a9a;
	padding-left:12em;
	}
#currency_header{
	border-right:1px solid #9a9a9a;
	}
#cart_header{
	background:url(../images/cart_bg.gif) 5em 0 no-repeat;
	padding:.2em 0 0 11em;
	}
#logoWrap{
	margin:auto;
	background-color: #ffffff;
	height:100px;
	width:900px;
	border-bottom:em solid #EEEEEE;
	}
#topLinks{
	float:right;
	background:#ffffff;
	margin: .9em auto;
	width:74%;
	}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 
#navColumnOneWrapper, #navColumnTwoWrapper {
	}
	
#tagline {
	color:#000000;
	font-size: 2em;
	text-align : center;
	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;
	}

#navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #2E2E2E;
	padding: 0.5em 0.2em;
	font-weight: bold;
	color: #909090;
	border-top:5px solid #000000;
	height: 1%;
	}
#navSupp{
	width:750px;
	margin:auto;
}
#paymentsWrap{
	margin:auto;
	width:50%;
	}
#payments{
	float:center;
	background:url(../images/discountgifts.gif) 5em 1em no-repeat;
	width:277px;
	height:62px;
	padding:1em 0 0 18em;
	}
#bottomNav{
	margin:auto;
	}
#bottomNav a, #bottomNav a:visited{
	color:#9a9a9a;
	text-decoration:underline;
	}

#navCatTabsWrapper {
	background-color: #ffffff;
	color: #9a9a9a;
	background-image:none;
}

#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;
	}

#navMain ul li a, #navSupp ul li a, #navSupp ul li a:visited, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #EEEEEE;
	white-space: nowrap;
	}
#navSupp ul li a:hover {
	color:#EEEEEE;
	text-decoration:underline;
	}

#navCatTabs ul li a {
	color: #9a9a9a;
	}

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

#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;
	}

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

#navMainSearch {
	float: right;
	}

#navBreadCrumb {
	padding: 0.5em 0.5em;
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	}

#navEZPagesTop {
	font-size: 0.95em;
	font-weight: bold;
	margin: 0;
	padding: 1.5em 0 1.7em .5em;
	color:#ffffff;
	}

#navEZPagesTop a:link, #navEZPagesTop a:visited{
	color:#ffffff;
	padding:0 1em 0 .8em;
	}
#navEZPagesTop a:hover{
	text-decoration:underline;
	}

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

/*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;*/
	padding: 0.5em;
	}

.alert {
	color: #FF0000;
	margin-left: 0.5em;
	}
.advisory {}
.important {
	font-weight: bold;
	}
.notice {}
.rating{}
.gvBal {
	float: right;
	}
.centerColumn {
	padding: 0.8em;
	}
#bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
	padding: 0 0 0 .6em;
	}
#bannerOne{
	padding:0;
	margin: .5em 0 0 0;
	}
.banners img{
	padding:0;
	}
.centerColumn{
	padding-top:0;
}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
	font-size: 0.9em;
	}

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

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

.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;
	background-color: #E4FEf5;
	border: 1px solid #003D00;
	}

.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
	}

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

.orderHistList {
	margin: 1em;
	padding: 0.2em 0em;
	list-style-type: none;
	} 

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

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

#cartBoxEmpty, #cartBoxVoucherBalance {
	font-weight: bold;
	}

.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 ;
	}

.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;
	}

.centerBoxWrapper {
	border-left: 1px solid #9a9a9a;
	border-right: 1px solid #9a9a9a;
	border-bottom: 4px solid #9a9a9a;
	height: 1%;
	margin: 1.1em 0;
	}

h2.centerBoxHeading {
	font-size: 1.5em;
	color: #ffffff;
	}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1.1em;
	color: #ffffff;
	}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
	font-size: 0.9em;
	align: center;
	color: #ffffff;
}

.leftBoxHeading, .rightBoxHeading {
	margin: 0em;
	padding:.5em 0 .7em 1em;
	background:#DE5F03 url(../images/catboxHeadingbg.gif) repeat-x;
}
.centerBoxHeading{
	margin: 0em;
	padding:.3em 0 .4em 2em;
	background:#DE5F03 url(../images/centerboxHeadingbg.gif) repeat-x;
}
#categoriesHeading {
	background:#DE5F03 url(../images/centerboxHeadingbg.gif) repeat-x;
	font-size:1.5em;
	padding:.2em 0 .4em 1em;
	}
#whatsnewHeading {
	background:#DE5F03 url(../images/centerboxHeadingbg.gif) repeat-x;
	font-size:1.2em;
	padding:.4em 0 .5em 1em;
	}
#bestsellersHeading {
	background:#DE5F03 url(../images/centerboxHeadingbg.gif) repeat-x;
	font-size:1.3em;
	padding:.4em 0 .5em 1em;
	}
#categories ul{
	padding:0;
	margin:0;
	list-style:none;
	}
.category-top li{
	padding:0;
	margin:0;
	background: #EEEEEE;
	vertical-align:middle;
	}
li.category-top a{
	padding:.4em 0 0 1.5em;
	margin:0;
	color:#333333;
	font-weight:bold;
	display:block;
	height:1.8em;
	border-bottom:1px solid #9a9a9a;
	background:#EEEEEE url(../images/boxlistbg.png) .4em 0.5em no-repeat;
	}
li.category-products a{
	padding:.4em 0 0 1.5em;
	margin:0;
	color:#333333;
	font-weight:bold;
	display:block;
	height:1.8em;
	border-bottom:1px solid #9a9a9a;
	background:#EEEEEE url(../images/boxlistbg.png) 1.2em 0.5em no-repeat;
	}
li.category-top a:hover{
	background:#333333 url(../images/boxlistbg.png) .4em 0.5em no-repeat;
	color:#EEEEEE;
	}
li.category-products a:hover{
	background:#333333 url(../images/boxlistbg.png) 1.2em 0.5em no-repeat;
	color:#EEEEEE;
	}
#categoriesContent{
	padding:0;
	margin:0;
	}
#bestsellersContent {
	color:#333333;
	font-weight:bold;
	}
#informationContent a:link, #informationContent a:visited, #bestsellersContent, 
#bestsellersContent a:link, #bestsellersContent a:visited{
	color:#333333;
	font-weight:bold;
	}
#extralinks{
	padding: .5em 0 .5em 1em;
	}
.leftBoxContainer, .rightBoxContainer {
	margin: 0 0 1em 0;
	border-left: 1px solid #9a9a9a;
	border-right: 1px solid #9a9a9a;
	border-bottom: 4px solid #9a9a9a;
	}

.sideBoxContent {
	background-color: #ffffff;
	padding: 0.4em;
	}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
	color: #FFFF33;
	text-decoration: none;
	} 

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
	color: #FFFFFF;
	}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: center;
	}

#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;
	}
.ic{
	display:none;
	}
#bannerboxHeading {
	background-color: #0000CC;
}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
	color: #008000;
	text-decoration: none;
	}
A.category-links, A.category-links:visited {
	color: #333333;
	font-weight:bold;
	}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
	color: #FF0000;
	text-decoration: none;
	}
SPAN.category-subs-parent {
	font-weight: bold;
	}
SPAN.category-subs-selected {
	font-weight: bold;
	}
/* end categories box links */

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

.forward, #shoppingCartDefault #PPECbutton {
	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;
	}

.hiddenField {
	display: none;
}
.visibleField {
	display: inline;
}

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;
	}

.productListing-rowheading {
	background-image: url(../images/centerBoxHeadingbg.gif);
	height: 2em;
	color: #FFFFFF;
	}

#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, #infoShoppingCart {
	background-color: #ffffff;
	}

/***IMAGE HANDLER SUPPORT ***/

#trailimageid {
  position: absolute;
  visibility: hidden;
  left: 0px;
  top: 0px;
  width: 220px;
  height: 0px;
  z-index: 1000;
}

#trailimageid div {
  padding: 5px;
  background-color: #FFF;
  border: 1px solid #888;
  text-align: center;
}

#trailimageid h1 {
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  padding: 2px 0px;
  text-align: left;
  width: 100%;
}

#trailimageid img {
  margin: 2px;
  border: none;
}

Thanks!