Display difference in IE and Firfox

21 Nov 2009, 3:12 PM

#1

cdhi2002

New Zenner

Join Date:: Nov 2009
Posts:: 16
Plugin Contributions:: 0

Display difference in IE and Firfox

Hi all,

I'm trying to style my web (https://www.heidimart.com). I changed Stylesheet.css. It works well in IE 8 (I don't have other versions of IE, I don't know whether other versions work well or not). However, it's displayed differenct in firfox and Netscape. I tried firfox 3.0 and 3.5. It's just a little bit different in firfox 3.0, I can accept that. But it's totally different in firfox 3.5, such as color, additional product images, etc. Netscape also has some difference. There are big spaces between product additonal images and main image and prodduct information.

Does anyone know how to fix this problem?

My Stylesheet.css is:```php
// STYLE SHEET MAP
//OUTERMOST WRAPPER.............line 46
//NAV BAR.......................line 60
//HEADER........................line 95
//LOGO..........................line 104
//TAGLINE.......................line 119
//CATEGORY TAB SPACE............line 137
//COLUMNS LEFT/ONE RIGHT/TWO....line 168
//SIDE BOXES....................line 187
//NEXT PREVIOUS.................line 231
//BREADCRUMB....................line 250
//NAV SUPP......................line 259
//FOOTER........................line 289
//LINKS.........................line 303
//CENTER COLUMN.................line 392
//BESTSELLERS BOX...............line 421
//EZ PAGES......................line 436
//OTHER NAMED BOXES.............line 467
//PRODUCT LISTING...............line 479
//WARNINGS ERRORS MESSAGES......line 505
//BASIC TEXT AND HEADINGS.......line 527
//SHOPPING CART DISPLAY.........line 562
//EVERYTHING ELSE...............line 700
*/

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.7em;
color: #795252;
background-color: #9B7969;
padding: 10px;
}

/* OUTERMOST WRAPPER */
#mainWrapper {
text-align: left;
width: 100%;
vertical-align: top;
border: 1px solid #795252;
background-color: #699B82;
color: #795252;
margin: auto;
}

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

/* NAV BAR */
#navMainWrapper {
margin: 0em;
background-color: #69829B;
font-weight: bold;
color: #ffffff;
height: 1%;
width: 100%;
border-bottom: 1px solid #795252;
}

#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: #699b82;
text-align: center;
margin: 0px;
padding: 0px;
border: 0px;
}

#logo {
margin: 0px;
padding: 0px;
border: 0px;
}

/* TAGLINE */
#tagline {
color:#795252;
font-size: 2em;
text-align : center;
vertical-align: middle;
}

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

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

/* CATEGORY TAB SPACE */
#navCatTabsWrapper {
margin: 0em;
background-color: #69829B;
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: #69829B;
border-top: 1px solid #795252;
border-right: 1px solid #795252;
}

#navColumnTwo {
vertical-align: top;
background-color: #69829B;
border-top: 1px solid #795252;
border-left: 1px solid #795252;
}

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

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

.columnLeft, .columnRight {
}

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

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

h3.leftBoxHeading, h3.leftBoxHeading a:link {
font-size: 1.3em;
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 {
border-top: 1px solid #795252;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

/* NAV SUPP */
#navSuppWrapper {
margin: 0em;
background-color: #69829B;
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: #69829B;
font-weight: bold;
text-decoration: none;
}
.centerColumn a:active , #navBreadCrumb a:active {
color: #69829B;
font-weight: bold;
text-decoration: none;
}

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

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

#navBreadCrumb a:visited {
color: #69829B;
}

#navBreadCrumb a:active {
color: #69829B;
}

#navBreadCrumb a:hover {
color: #699B82;
}

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

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

.piclink a:hover {
color:#699B82
}

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

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

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

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

.centerBoxContents {
vertical-align: top;
}

.centerColumn {
padding: 0.8em;
}

/* 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 */
#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: #69829B;
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 {
float: left;
position:relative; right: 140px;
padding-top: 150px;
}

.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 #69829B;
}

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

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


Thanks a lot.

21 Nov 2009, 4:00 PM

#2

stevesh

Black Belt

Join Date:: Feb 2005
Location:: Lansing, Michigan USA
Posts:: 19,793
Plugin Contributions:: 2

Re: Display difference in IE and Firfox

First, if you have IE8, you can see what the site would look like in IE7 by clicking the 'Compatibility Mode' button between the address bar and the Refresh button (assuming you haven't moved stuff around).

Your site looks the same here in IE8 and FF3 (latest version), and just a little different in IE7, at least on the product info page.

Removing the float:left from #productAdditionalImage seems to move the description back where it belongs, but I don't know what effect that'll have in FF. You may have to float the description, too.

There's a useful tool in IE8 - hit F12 for the Web Developer. CTRL-B will allow you to click on a area of the site and see the CSS. Not as cool as Firefox Web Developer plugin, but handy.

21 Nov 2009, 4:45 PM

#3

cdhi2002

New Zenner

Join Date:: Nov 2009
Posts:: 16
Plugin Contributions:: 0

Re: Display difference in IE and Firfox

Thank you, stevesh.

If I removed "float:left", the additional images wouldn't be in a row. For example, the GPS product's additional images would be in 2 raws, and didn't align well.

One interesting thing is I didn't make any changement, firfox 3.5 works well now. I don't know why.

The other 2 problems are:

There are big spaces between product additonal images and main image and/or prodduct information in all web explorers.

2.The difference in IE 7 and netscape. The production information is not below additonal images, but at the side.

Do you have any idea to fix this?

Thank you

21 Nov 2009, 5:01 PM

#4

cdhi2002

New Zenner

Join Date:: Nov 2009
Posts:: 16
Plugin Contributions:: 0

Re: Display difference in IE and Firfox

I found the way to remove that big space between main image and additional images: I adjust the #productAdditionalImages "padding-top" number. It's ok now.

My current problems are:

In Netscape, there is also a big space between product additonal images and prodduct information. In other explorer, there is no such space.
In IE 7, the production information is not below additonal images, but at the side.

Thank you