How to make font size appear same in both FF & IE?

**Eternal_Howl** · 12-13-2007, 08:46 AM

I've been reading and I know there must be a hack or something that will enable me to display the font size I want and it's equivalent in the opposing browser. For example, if I have a font size of 93% (yahoo's UI library suggested conversion comes out at 12px) it shows up at the size I want in IE, but in firefox it appears too small.

I'm sure there's a hack for IE or firefox to get each to display how I want it to, but I can't find it or can't relate it to my own css - if that makes sense.

I try to read up on my issues before I post a question to you here. I know you don't exist for my sole purpose of figuring out CSS, but appreciate it when you do know the answer and can tell me. I've been reading for a good 2 hours and I've also done a search in the forum here to see if the question has already been answered, but couldn't find what I was looking for. Help?

Body{
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;

word-wrap: break-word;
background-color:#000000;
background-image:none;
color:#ffffff;
font-family: garamond, georgia, verdana, serif;
font-size: 93%;
font-weight: normal; }

A { color: #ffffff; font-weight: bold; text-decoration: none }
A:link { color: #ffffff; font-weight: bold; text-decoration: none }
A:active { color: #ffffff; font-weight: bold; text-decoration: none }
A:visited { color: #ffffff; font-weight: bold; text-decoration: none }
A:hover { color: #ffffff; background: #666666; font-weight: bold; text-decoration: underline}
img { border: 0;}

Above I've pasted the css that is applied to all pages as a linked style sheet, as it's mainly pertaining to overall colour scheme and non-specific layout etc. I'm not sure if that's helpful or not

Thanks for reading!

**jscheuer1** · 12-13-2007, 09:05 AM

Font sizes don't appear the same in FF and FF, let alone across browsers. Your page should be designed to work with whatever font size (within reason) that the user has set for themselves.

Typically, font sizes vary with resolution - higher resolution users prefer larger font sizes and lower resolution users smaller ones. This is a function of how text appears on the screen at various resolutions. Additionally, users may also prefer something else if their eyesight demands it.

The internet isn't TV or a magazine. You must allow for various user agents and user preferences. Otherwise your page will not be as accessible as it could & should be.

**Eternal_Howl** · 12-13-2007, 09:36 AM

Thanks for your reply. So what you're basically saying, is there is no way around it. I have read you can call specific stylesheets if FF is detected.
If so, this would work in the respect that I could ensure the 'normal' text size rendering in FF would be right as long as the surfer had not adjusted their personal settings (in that case it wouldn't be my problem).

Would this solve my problem? IF firefox, use stylesheet ....etc? How would I do this?

**tech_support** · 12-13-2007, 09:53 AM

Use pixels instead of percentages.

**jscheuer1** · 12-13-2007, 04:15 PM

Originally Posted by tech_support

Use pixels instead of percentages.

Using pixels for font size has the result of no text resizing by IE possible. All other browsers can still resize the text. So, it isn't all that great of an idea from the point of view of accessibility.

Percent is actually the preferred unit for font size. If your problem is a slight to moderate variation in the way browsers render a particular percent size at 'normal viewing', your layout is too rigid.

However, by fine tuning the percent value, usually a number may be arrived at that looks the same size, or very, very close to the same size in most browsers under 'normal viewing'.

Say you are using 90%. It may look 'right' in IE, too small in some others. Change to 91% or 92%. You will often notice that small increments or decrements will result in no change in some browsers while causing the 'offending' browser to render at the desired size. Decimals (like 91.5%) may be used.

**Eternal_Howl** · 12-13-2007, 05:28 PM

Thanks, I'll try fiddling the numbers to see if it works. I would prefer to stick with percentages as it means then as far as I understand, it's not relying on resolution for pixels etc.

**boogyman** · 12-13-2007, 06:24 PM

you should have 1 explicit declaration of font-size in your stylesheet, usually given in the body tag, and the rest should be based upon percentages as you have it.

**jscheuer1** · 12-13-2007, 07:04 PM

Originally Posted by boogyman

you should have 1 explicit declaration of font-size in your stylesheet, usually given in the body tag, and the rest should be based upon percentages as you have it.

Why? Unless you want the base font size to be different than the default (100%, also known as 1em, 16px in a standard browser set to 'normal viewing'), there is no reason I can think of to do so. And, if this explicit declaration is in any units other than percent, it could cause problems in some browsers as far as accessibility goes.

**boogyman** · 12-13-2007, 08:00 PM

using "normal" as the declaration is one way of explicitly declaring a size. I that is what I use on all of the pages that I manage, however there are other, less preferable way of doing such. em,px,pt are among those.

My message was simply trying to explain that using percentages is perferable because it allows for resizing of all elements according to that 1 declaration. So while its debatable about which denomination is better than the next, the concept behind the idea remains the same.

If the developer wants to change the default font-size he/she only needs to change it one place and the proportions of the site stay the same. at the same time if the default font-size does not fit the needs of the user, the proportions will still stay the same if the user changes his font size.