Big help needed: wrap size and display problem

[cdhi2002]

Hello All,

I meet two big problems when I modify my store (http://heidimart.com).

1. content wrap size is very strange except mainpage, it's only around 3/5 of full size. For example: http://heidimart.com//index.php?main...dex&cPath=2_10

2. My web looks different in different internet navigators (for example: IE and firefox), different internet navigator versions, even in different computers.

my current stylesheet code is

/**
 
body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 0.8em;
	color: #795252;
	background-color: #393939;
	}

/* OUTERMOST WRAPPER */
#mainWrapper {
	text-align: left;
	width: 760px;
	vertical-align: top;
	background-color: #797979;

	margin: auto;
	}

#contentMainWrapper {
	background-color: #FFFFFF;
	color: #795252;
	}

/* NAV BAR */
#navMainWrapper {
	margin: 0em;
	background-color: #393939;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

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

#navMain ul li {
	display: inline;
	}

#navMain ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	white-space: nowrap;
	}

#navMainSearch {
	margin: 0.5em;
	}

/* HEADER */
#headerWrapper {
	margin: 0em;
	padding: 0em;
	vertical-align: top;
	}

/*  LOGO  */
#logoWrapper {
	background-color: #797979;
	text-align: center;
	margin: 0px;
	padding: 0px;
	border: 0px;
 height: 82px;	}

#logo {
	margin: 0px;
	padding: 0px;
	border: 0px;
	float: left; position:relative; left: 15px;}

/* TAGLINE */
#tagline {
	color:#795252;
	font-size: 1.5em;
	text-align : center;
	vertical-align: top; position:relative; top: 22px; 	}

.tagline {
	padding: 0px;
	margin: 0px;
	}

.taglineWrapper {
	padding: 0px;
	margin: 0px;	
	}

/* CATEGORY TAB SPACE  */
#navCatTabsWrapper {
	margin: 0em;
	background-color: #393939;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	text-align: center;
	}

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

#navCatTabs ul li {
	display: inline;
	}

#navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	white-space: nowrap;
	}

/* COLUMNS LEFT/ONE RIGHT/TWO  */
#navColumnOneWrapper, #navColumnTwoWrapper {
	margin: auto;
	} 

#navColumnOne {
	vertical-align: top;
	background-color: #393939;
	}

#navColumnTwo {
	vertical-align: top;
	background-color: #393939;
		}

/* SIDE BOXES */
.sideBoxContent {
	color: #E4F8FF;
	padding: 5px;
	margin-bottom: 3em;
	border: 0px;
	font-size: 1.0em;
	}

.leftBoxContent, .rightBoxContent {
	background-color: #ffffff;
	margin-bottom: 1em;
	}


.leftBoxHeading, .rightBoxHeading {
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	margin-top: 1em;
	padding: 0px;
	color: #FFFFFF;
	background-color: #797979;
	}

.leftBoxContainer, .rightBoxContainer {
	padding: 0px;
	margin: 0px;
	border: 0px;
	}

h3.leftBoxHeading, h3.leftBoxHeading a:link {
	font-size: 1.1em;
	font-weight: bold;
	color: #ffffff;
	}

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

/* NEXT PREVIOUS */
.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;
	}

.navNextPrevWrapper {
	text-align: center;
	}

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

/*  NAV SUPP   */
#navSuppWrapper {
	margin: 0em;
	background-color: #393939;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

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

#navSupp ul li {
	display: inline;
	}

#navSupp ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	white-space: nowrap;
	}

/* FOOTER  */
.legalCopyright {
	border-top: 1px solid #795252;
	}

#siteinfoCredits, #siteinfoStatus, #siteinfoIP {
	font-size: 0.9em;
	text-align: center;
	}

#siteinfoLegal {
	text-align: center;
	}

/*   LINKS   */
a:link, #navEZPagesTOC ul li a, #reviewsHeading a:link, #featuredHeading a:link, #whatsnewHeading a:link{
	font-size: 1em;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	}
 
a:visited, #navEZPagesTOC a:visited, #reviewsHeading a:visited , #featuredHeading a:visited, .whatsnewHeading a:visited {
	font-size: 1em;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover , #reviewsHeading a:hover, #featuredHeading a:hover, #whatsnewHeading a:hover {
	font-size: 1em;
	color: #FFC7AD;
	}

a:active {
	font-size: 1em;
	color: #0000FF;
	}

a img {
	border: none;
	} 

.centerColumn a:link , #navBreadCrumb a:link {
	font-weight: bold;
	text-decoration: none;
	color: #597EA3;
	}

.centerColumn a:visited , #navBreadCrumb a:visited  {
	color: #393939;
	font-weight: bold;
	text-decoration: none;
	}
.centerColumn a:active , #navBreadCrumb a:active {
	color: #393939;
	font-weight: bold;
	text-decoration: none;
	}

.centerColumn a:hover , #navBreadCrumb a:hover {
	color: #797979;
	font-weight: bold;
	text-decoration: none;
	}

#navBreadCrumb a:link {
	font-weight: bold;
	text-decoration: none;
	color: #597EA3;
	}

#navBreadCrumb a:visited  {
	color: #393939;
	}

#navBreadCrumb a:active {
	color: #393939;
	}

#navBreadCrumb a:hover {
	color: #797979;
	}

.piclink {
	text-align: center;
	float: left;
	}

.piclink a:link, .new a:active , .new a:visited {
	color: #393939;
	font-weight: bold;
	text-decoration: none
	}

.piclink a:hover {
	color:#797979
	}

.categoryIcon a:link {
	text-decoration: none;
	}

/* CENTER COLUMN */
#contentColumnMain {
	vertical-align: top;
	}

.centerBoxHeading {
	margin: 0em;
	background-color: #797979;
	color: #ffffff;
	padding: 0.5em 0.2em;
	text-align: center;
	}

.centerBoxWrapper
	{
	border-right: 1px solid #797979;
	border-left: 1px solid #797979;
	margin-bottom: 10px;
	text-align: center;
	}

.centerBoxContents {
	vertical-align: top;
	}

.centerColumn {
	padding: 1.2em;
	}

/* BESTSELLERS BOX */
#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;
	}

/* EZ PAGES */#navEZPagesTop a {float: right; padding-right: 5em; color: yellow;}. 
#ezPageBoxList ul {
	margin: 0em;
	padding: 0em;
	vertical-align: top;
	}

#ezPageBoxList {
	margin: 0em;
	padding: 0em;
	vertical-align: top;
	}

#navEZPagesTOCWrapper {
	margin: 0;
	width: 47%;
	}

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

#ezPageBoxList li {
	margin: 0;
	padding: 0.2em 0em;
	}

#navEZPageNextPrev {
	text-align: center;
	} /* OTHER NAMED BOXES */
.centerBoxContents, .centerBoxContentsAlsoPurch, .centerBoxContentNew, .centerBoxContentsSpecials, .centerBoxContentsFeatured, .centerBoxContentsNew, .categoryListBoxContents, .specialsListBoxContents {
	vertical-align: top;
	float: left;
	margin: 1em 0em;
	text-align: center;
	}

.additionalImages {
	margin: 1em 0em;
	}

/* PRODUCT LISTING */
.productListing-data {
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	}

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

.productListing-even {
	background-color: #F0F0F0;
	height: 1.5em;
	vertical-align: top;
	}
#indexProductListCatDescription {
	margin: 0.5em;
	}

.listingDescription {
	text-align: left;
	}

/* WARNINGS ERRORS MESSAGES */
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	padding: 0.2em;
	border: 1px solid #795252;
	}

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

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

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

/* BASIC TEXT AND HEADINGS  */
h1 {
	font-size: 1.5em;
	margin: 0.3em;
	}

#productName {
	}

#productPrices {
	}

h2 {
	font-size: 1.4em;
	margin: 0.3em;
	}

h3 {
	font-size: 1.4em;
	color: #393939;
	margin: 0.3em;
	}

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

.biggerText {
	font-size: 1.2em;
	}

.smallText {
	font-size: 0.9em;
	}

/* SHOPPING CART DISPLAY */
.tableHeading TH {
	border-bottom: 1px solid #cccccc;
	}

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

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

#cartAdd {
	float: right;
	text-align: center;
	margin: 1em;
	border: 1px solid #795252;
	padding: 1em;
	}

#cartSubTotal {
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	padding-right: 2.5em;
	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;
	}

.orderHistList {
	margin: 1em;
	padding: 0.2em 0em;
	} 

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

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

#reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	margin: 0em 1em 1em 0em ;
	}

#productMainImage {
	float: left;
	margin: 10px;
	} #productAdditionalImages {padding-top: 90px;}  

.categoryIcon {
	vertical-align: bottom;
	text-align: center;
	float: left;
	}

#cartImage {
	margin: 0.5em 1em;
	}

.attributesComments {
	}

/*  EVERYTHING ELSE */
#cartBoxListWrapper,  #cartBoxListWrapper ul, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	vertical-align: top;
	}

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

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

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

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

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

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

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

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

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

.attribImg {
	float: right;
	width: 20%;
	margin: 0.3em 0em;
	text-align: center;
	}

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

.additionalImages, .alert {
	vertical-align: top;
	}

/*.content,*/ .shippingEstimatorWrapper {
	/*font-size: 1.2em;*/
	padding: 0.5em;
	}

#productDescription {
	float: left;
	}

#productDateAdded , #productInfoLink , #productAdditionalImages {
	text-align: center;
	}

#productDateAvailable {
	font-weight: bold;
	color: #CC0099;
	text-align: center;
	}

.productGeneral {
	}

.alert {
	color: #FF0000;
	margin-left: 0.5em;
	}
.advisory {}
.important {
	font-weight: bold;
	}
.notice {}
.rating{}
.gvBal {
	float: right;
	}
#bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
	text-align: center;
	padding: 0.8em;
	}

#bannerboxHeading {
	background-color: #9B7969;
	}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, .center, 
 .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .additionalImages, .gvBal  {
	text-align: center;
	}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

#reviewsContent {
	color: #A6F4CD;
	font-style: italic;
	}

.category-subs-selected {
	font-style: italic;
	color: #FFC7AD;
	}

.back {
	float: left;
	vertical-align: top; 
	}

.forward {
	float: right;
	}

.bold {
	font-weight: bold;
	}

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

.wrapperAttribsOptions {
	vertical-align: top;
	margin: 5px;
	float: none;	
	}

#attribTable {
	width: 100%;
	margin-bottom: 15px;
	background-color:#F0F0F0;
	}

th {
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	color: #795252;
	}



.newsInfo {
  text-align: left;
  font-style: normal;
}

#newsscrollbox {
  font-size: 0.8em;
}

.newsContent {
font-size: 1.2em;
}

#newsArchivTitleHeading {
	text-align: left;
	
}

#newsArchivDateHeading {
	text-align: right;
	}

Is there anybody who can give me a kind help to fix them?

Thanks a lot.

[cdhi2002]

Thanks, I fixed the 1st problem. It's because I set to don't show up right column, but didn't set right column width to be 0.

However, the 2nd problem is still not fixed. I tried to find the answer for more than one month. But I'm still in dark.

Could anyone help me out?

Thanks

[rstevenson]

Your site looks almost identical in Firefox, Safari and Opera. I suspect you're seeing something else in IE? If so, you'll need to be more specific about the differences you're seeing. One thing to try first is to clear the cache in IE. It seems to get stuck with old page versions, especially if you're making changes in the CSS. Clear the cache often when reviewing changes in IE.

Rob

[cdhi2002]

Thank you, Rob.

It worked when I changed mainwrap width from "100%" to be "760px" and cleaned cache. But If I changed to be "100%", which is my favored, there is a big difference. I don't know the reason. For 760px, there are still two small differences. 1: 1st news in news box: "-" is not closed to new title in IE, there is a big space, but in firefox, it's ok. 2. The "SSL Verified transaction Safe Website" is bold in firefox.
My main concern is still how can I changed mainwrap size back to 100% without the big difference (the width of side column, the size of of sidebox).

Do you have any idea about these 3 issues?

Thanks a lot,