IE7 versus FireFox - font size mismatch

[hedera]

My ZC site (1.3.7) has totally different font sizes between FireFox (teensy) and IE7 (so big that some sections can't be fully read, the font goes behind the right column and doesn't wrap). I read countingsheep's long thread but I still can't figure out what to put in the font-size parm in this block:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #e5edf5;
}

I'd really like font size to be about the same on both browsers, is that even possible?? We've changed our CSS slightly but not the fonts:

http://67.199.28.10/ZenCart/

Advice greatly appreciated.

[swelter83]

Hi!
Please post a link to your site, the link you have posted sends the user to the zc_install/index.php directory where you setup your zen-cart.

Also, i'd like to welcome you to the world of for IE7 and cross browser issues.

But quite frankly it's not that big of a deal really, frustrating but nothing that can't be fixed. So get that link up and i'll take a look at what your talking about.
I have the same line of coding for my stylesheet.css and all of the font sizes
are fine. It's probably something else.

[hedera]

Thanks for your response, swelter83. In fact, I worked out a reasonable solution to the font size issue by changing the font-size: default in the CSS from 62.5% to .9em and it looks much better now. However, your note about the link has brought a problem with the site to my attention, thank you very much I have to go fix that one now...

It never ends...

[hedera]

I have now fixed my monster, and you can find my site at:

http://liferingtest.com/ZenCart

Any comments you'd like to make will be welcome.

[swelter83]

hey there! site looks good.
I'd do want to make one suggestion if thats cool with you?

the search field you have up in the top right of your header...
IF you didn't know already you can reposition that to be a little lower in the header
so it inline with your "Books Brochures Other" links by adding this to the #navMainSearch class tag in your stylesheet.css

you might have something like this at first:

#navMainSearch {
float: right;
}

add this to reposition it:

#navMainSearch {

float: right;
margin-top: 200px;
margin-right: 48px;

}

change the margin-top: 200px; and margin-right 48px; to suit your own needs :)

take care, if you have any more questions please dont hesitate to send me a
PM with your question, i'll be more than happy to help!

[hedera]

Thanks for the suggestion! The numbers you proposed were way too big (that whole top image is a single JPEG), but with this it looks much better:

#navMainSearch {
float: right;
margin-top: 5px;
margin-right: 25px;
}

Now if I can only figure out how to make the fonts small enough - I'm still getting mismatches, some pages are way too big, others are OK, and when they're too big, they cut off some important data (like, a phone number). But we're getting better...

[swelter83]

hey again!

yeah the code i posted for you was just an example to show you how to use it to position where you needed

to get your fonts to match in all browsers use this...

this is what i use...

font-size: 12px;
font-family: Arial;

try that, it should give you what you are looking for, if it doesn't hollar back at me and we'll see if we can't get you fixed up!

[hedera]

What I ended up with was this:

font-family: verdana, arial, helvetica, sans-serif;
font-size: .9em;

I have a thing about the Verdana font, I just like it better than arial. I tried 12px and it looked good but the text crowded in on the images too much; the .9em font size was the result of some experimenting (I started with 1em) and that's what's there now. I could go back and try 10px and see how that works. I don't seem to have made very good notes but I did note that "1em doesn't quite clean up the display in checkout_shipping."

Trouble is, although the site looks much more similar between the browsers than before, the fonts on the checkout_shipping page are MUCH bigger than they should be. They seem to be being sized independently of the body {} settings and I can't find where.

It also bothers me that the text disappears behind the right pane instead of "realizing" that it's out of space and wrapping to the next line. It's acting as if it has a fixed width for display - is this a side effect of a fixed width template?

Your advice is GREATLY appreciated!