IE7 versus FireFox - font size mismatch

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.

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 :censored: 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. :D

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

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.

hey there! site looks good.:clap:
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!

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

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

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! :D

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!

Hey Hedera:clap::clap:

lol keep this in mind... the code that i give you is not something you have to follow exactly, it's just an example, always put in the positioning and type which you like best ;)

also, when I try to goto your site now, the link is no longer working that you originally provided. Have you updated the link? if so repost the new one so I can check out the "checkout page" haha

Until I can see it this is my advice for ya:
1.) goto the checkout page in your browser
**2.) **right click on the page somewhere
3.) in the menu select "Save Page As..."
4.) once saved open the .html file and look at the layout.
5.) find the text that is really large and highlight it and see what ID's or Casses are surrounding it.

These ID's and classes will give you a hint where to look in your stylesheet, if indeed this is where the problem for that particular text is.

So grab me a new link if you can and post it up for me again :D
I'll check back for your reply!

Take care, and hope this has been of some help to you!

After renaming the site I got cocky and moved ZenCart up to root. So the link is now:

http://www.liferingtest.com/

You have a good suggestion on the checkout page, but you also remind me that I have a new tool, which I'm not used to yet - I put FireFox Web Developer on my laptop (may yet put it on the desktop too) which means I can go in and literally look at the background for everything on that page... If you haven't played with Web Developer it is awesome.

hey, if you have a link to that let me see the Fire Fox Web Developer plugin or whatever it is, sounds interesting.

I myself am a web designer, and I enjoy taking a look at new progs thats have been released (if in fact it is new.)

Sure, you can find it at

https://addons.mozilla.org/en-US/firefox/addon/60

It's free so if you don't like it you can just uninstall, but I was AMAZED at what it can do.

thank you, i'll be checking it out!