font size variation in firefox and IE, Im stuck?

[countingsheep]

Can someone tell me what I am doing wrong that is causing such a variation in font size in firefox and IE?

Here is my stylesheet:


/**
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2007 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 5952 2007-03-03 06:18:46Z drbyte $
/**
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2007 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 5952 2007-03-03 06:18:46Z drbyte $
*/
body {
margin-left: 55px;
font-family: Arial, Helvetica, sans-serif;
font-size:62.5%;
color: #000000;
background-color: #ffffff;
background-image: url('http://bandit.thedesignshoppe.com/~classylu/images/back2.jpg');
}
a img {border: none; }
a:link, #navEZPagesTOC ul li a {
color: #000;
text-decoration: none;
}

a:visited {
color: #000;
text-decoration: none;
}
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #000;
}
a:active {
color: #000;
}
h1 {
font-size: 1.5em;
color: #000;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
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, 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: #E4FEF5;
}
FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #cccccc;
}
LEGEND {
font-weight: bold;
padding: 0.3em;
color: black;
}
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: 0px 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: 850px;
vertical-align: top;
border: 0px solid #9a9a9a;
}
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: .5em;
}
#logoWrapper{
background-color: #ffffff;
}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.5em;
margin-right: 0.5em;
}

#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: 1em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}
#navCatTabsWrapper {
margin: 0em;
background-color: #CB974E;
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}
#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, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #00000;
white-space: nowrap;
}
#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;
background-color: #ffffff;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
}
#navEZPagesTop {
background-color: #CB974E;
font-size: 0.75em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}
#navColumnOne, #navColumnTwo {
background-color: transparent;
}
/*The main content classes---this is the side boxes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}
/*.content,*/ #productDescription, .shippingEstimatorWrapper {
/*font-size: 1.2em;*/
padding: 1em;
}
.alert {
color: #FF0000;
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: .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;
}
.mediaTitle {
float: left;
}
.mediaTypeLink {
float: right;
}
.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: 1px dotted #9a9a9a;
height: 1%;
margin: 1.1em 0;
}
h2.centerBoxHeading {
font-size: 1.3em;
color: #ffffff;
}
/*sideboxes*/
.columnLeft {}
h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em;
color: #ffffff;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
color: #ffffff;
}
.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #CB974E;
padding: 0.5em 0.2em;
}
.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px dotted #9a9a9a;
border-bottom: 1px dotted #9a9a9a;
margin-top: 1.5em;
}
.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
font-size: 1em;
}
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, .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;
font-size: 1.2em; /*center product description text size */
}
#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: #CB974E;
}
#upProductsHeading {
text-align: left;
}
#upDateHeading {
text-align: right;
}
/* categories box parent and child categories */
A.category-top, A.category-top:visited {
color: #000;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: #000;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #000;
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-color: #CB974E;
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;
}
.information {padding: 10px 3px; line-height: 150%;}
#shoppingcartBody #shippingEstimatorContent {
clear: both;
}
.seDisplayedAddressLabel {
background-color:#85C285;
text-align: center;
}
.seDisplayedAddressInfo {
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#seShipTo {
padding: 0.2em;
}
.centerColumn { font-size: .80em;}

[0be1]

I am by no means a css expert, but one thing I noticed right off the bat is in your body part the font size is set to:

font-size:62.5%;

Why so high, and set as a % instead of em or px? Just curious. Also could you please post your URL for others to look at and see if we can see the same problem as well as view the page source.

thanks...

0be1

[countingsheep]

The site is
http://bandit.thedesignshoppe.com/~classylu/shop/

but I changed the 62.5% to px and also changed the font style, but they are still very different in the two browsers.

[0be1]

I see a few different font issues, so let's work with them one at a time, ok. Also which version of IE are you testing this in? If it is anything older than IE 6.0 it's definitely time for an upgrade. You can find out by clicking on help about Internet Explorer in Internet Explorer. Please tell me which section to test with first.

Also if you are using firefox you can download a plugin called web developer and it will help ALOT with design issues and questions. One of them is viewing and modifying css in real time and then if if does what you want, you can save those stylesheet.css changes locally and then upload them.

Also you are using the overrides system aren't you

0be1

[0be1]

Also when I use the css plugin (see previous post) I see a style sheet tab called embedded styles and here is what it contains:

<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style2 {font-size: 12px}
.style3 {font-family: Arial, Helvetica, sans-serif; font-size: 12; }
.style4 {font-size: 12}
-->

That .style3 is controlling the join our mailing list section, so am I to assume that you have added a mailing list mod, if so I would write the author and get rid of the embedded part and make sure there is not other class named .style3 anywhere else. Do you also notice the way the above is coded and it is not consistent? So there is one place to start. Like I said use Firefox and the web developer mod to your advantage.

0be1

[countingsheep]

Also when I use the css plugin (see previous post) I see a style sheet tab called embedded styles and here is what it contains:

<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style2 {font-size: 12px}
.style3 {font-family: Arial, Helvetica, sans-serif; font-size: 12; }
.style4 {font-size: 12}
-->

That .style3 is controlling the join our mailing list section, so am I to assume that you have added a mailing list mod, if so I would write the author and get rid of the embedded part and make sure there is not other class named .style3 anywhere else. Do you also notice the way the above is coded and it is not consistent? So there is one place to start. Like I said use Firefox and the web developer mod to your advantage.

0be1

I am using the overrides system where I have the templates in a CUSTOM folder.

I do have firefox and web developer as well as firebug downloaded. HOWEVER, I do not know enough about CSS to know what I can and can not do. And without knowing the terminology for CSS, I dont know what to search for to find the correct answers.
It is something I really need to study but dont know where to start.

[countingsheep]

By the way, I dont expect you to fix my errors, but your guidance will be greatly appreciated.

With that said, I dont know what to change in the styles for the mailing list. I havent completed that just yet, but, Im not sure what you mean by being embedded.

One more question, what are the symbols in firefox that are showing in the upper left corner? And I am using IE7.

[countingsheep]

OK, I removed the styles for the mailing list box on the left. So that shouldnt be causing a discrepancy now.

[0be1]

For starters on your page using firefox, right click on your page anywhere and choose webdeveloper-css-edit css

Now you will see all of your css files that are loading at one time and you can view what is going on. The fastest way I can describe to see what you need to "search for" in the css editor is to do the following:

Again right click on the page, this time choose, webdeveloper- information- display ID & Class details. This will so you the css place holders (pretty cool huh!) Now you can search for these values and modify them and the changes will take place immediately and you can see if that is what you are wanting to change or not. Make sense?

I also notice under the main stylesheet I noticed:

body {
margin-left: 55px;
font: small 900 10px tahoma,arial,helvetica,sans-serif;
background-color: #ffffff;

There should not be a small 900 in there. I would take that out. Also what are you using for your editing program. I am assuming you are copying and pasting from somewhere. That is where those weird symbols came from, or possibly a corrupt upload. Try reuploading your stylesheet.css file (well you need to after making the changes anyway). If that did not do it, look at your page source through you browser and see if you can determine which page the code may be one. My guess is by your page layout you may have used Microsoft Word (or something else) formatted some code, did a copy and paste into your define_main_page.php (which you will find under your admin login under tools-define page editor and choose define_main_page.php (also be sure that you chose the htmlarea editor, not plain text)).

This should be some good starting points for you, and please keep posting as I am watching for it and will help when I can accordingly.

Blessings...

0be1

[Get Em Fast]

I am by no means a css expert, but one thing I noticed right off the bat is in your body part the font size is set to:

font-size:62.5%;

Why so high, and set as a % instead of em or px? Just curious.

0be1

O, look at the css of ANY template_default. You'll notice that 62.5% is DEFAULT for ZC.

Sheep, the funny little /** comes from the VERY 1st line of your stylesheet......DELETE!