font size variation in firefox and IE, Im stuck?

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

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

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.

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 :wink:

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:

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

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

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.

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.

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

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

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.

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!

Get Em Fast;

Great catch on the funny characters I did not even see that, #%$& these 'ol eyes!!!

Also I was not aware that 62.5% was the default. It just seemed a little strange and stood out seeing how it was layed out differently than the other font styles which did not make sense.

This should get countingsheep in a much better position :D

Thanks again for helping me learn something new as well.

0be1

Any time obe1. Ahhh, the student becomes the teacher. :smile:
Signed: L. Skywalker.

Hey, I didn't say that........it was my evil twin.......I swear!!!

Just to clarify things, this site was uploaded prior to me getting in there, and I have been trying to fix the problems. I do believe the pages were copied from their other website, so, that is probably where some of the symbols, and all the errors are coming from.

I have deleted the top line of the css, and had no results. I then copied the top lines of the template_default css page and still rendering the same symbols.

I greatly appreciate the assistance that you both are giving me, but I am still confused on what to do. Please know that I have spent MANY hours on this and had it turned upside down and inside out trying to get it correct before even coming here and asking.
I went to www.w3schools.com/css/ for font help and thats where the small 900 came in, which did help, because as you can see, the font in some areas is terribly small now in firefox.

Is there anyone who would be willing to edit the css page for a fee?

Also, sheep, why is there a 3px X 3px transparent logo.gif on your page just below your home/ login links? If you click on that little tiny square, it flashes those little characters for a split second, so I'm not sure that it's just the css, anymore......but I would remove that from your stylesheet.css first. Check any php files that you've edited (like index.php) for those little characters in there somewhere. I would look more for you, but I've got to go for about an hour 1/2. If you haven't got it resolved by then, I'll see if I can't help more.

I can help as well in any way I can, and as much free help that I have gotten from the community and the forms I would not charge you anything as long as it is only a few tweaks here and there and not writing the css file from scratch.

0be1

Get Em Fast;

Watch out what you do to the Jedi :shocking:

I may have an evil twin lurking somewhere as well...

0be1

P.S. Sometimes it is very good to be the student. It helps keep one humble :D

I have also PM's you for your email address with instructions requesting your email as well as what to do with the new css file. Please PM me or reply to yours when you get a moment.

Thanks...

0be1

I sent you my email address.. thank you so much.

Here is what Get Em Fast was talking about, again found if you view page source.

Go to this directory:

includes/templates/luxury/images/logo.gif
and rename the logo.gif file to logo.old and refresh the page and
see what difference (if any it makes) if it is better, then permanently delete the file
and if not then rename it back and leave it. I do not see why
it should be left in. Does this make sense?

0be1

here are your next instructions to see where Get Em Fast is talking about.

right click on your page, choose webdeveloper - images - display image dimensions. You should see right below where is says home "3 x 3" The last developer used it as a spacer of some sort and it is set as a transparent.gif or white. rename the file (see previous post) and see what happens.

0be1