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

[Eternal_Howl]

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]

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]

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]

Use pixels instead of percentages.

[jscheuer1]

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]

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]

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]

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]

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.

[jscheuer1]

From the css validator:


body Value Error : font-size normal is not a font-size value : normal

So, if you are using font-size:normal;, it is invalid and meaningless in any standards compliant browser.

[Eternal_Howl]

I actually tried the font-size: normal yesterday, but it didn't work and I didn't really expect it to.

So the option that is possibly available is doing a linked style sheet for Firefox? if firefox detected use "this" style sheet instead?

I just want to make it easy for the person visiting the site but don't want overly large text for the 75% of other surfers who are still using IE.

[jscheuer1]

Not exactly, but yes, sort of:


<link rel="stylesheet" href="all_browsers.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="ie_supplemental.css" type="text/css">
<![endif]-->

The styles in all_browsers.css will be followed by all browsers. The ones in ie_supplemental.css will modify, supplement, contradict the first style sheet for IE only. If all you are worried about is font size, the first link can be the styles for the page and the second one may contain only the smaller font-size declarations for IE.

[Eternal_Howl]

Thanks for your help, I'll give it a shot.

[JohnRostron]

Have a look at the article in A List Apart on How to Size Text (http://alistapart.com/articles/howtosizetextincss) for a useful discussion on this.

John Rostron

[ferlach]

I thought that it is best to use em for font size. Now you are saying it is better to use percentages. Does not also em allow for font adjustments by the viewer?

I normally set the font-size to 1em, and have nocticed that the font appears larger in IE than in FF. Everyone has said that there is no size difference, says I am wrong, which I know I am not. The font appears to about 2px larger in IE. I do not mind that, but what can I do to increase the size in FF so that is closer to IE?

[jscheuer1]

I thought that it is best to use em for font size. Now you are saying it is better to use percentages. Does not also em allow for font adjustments by the viewer?

em units are good, but are buggy in IE when nested. % is otherwise equivalent to using em, and doesn't have this 'nesting' problem in IE. em units are very good for setting position and dimensions in a flexible layout.


I normally set the font-size to 1em, and have nocticed that the font appears larger in IE than in FF. Everyone has said that there is no size difference, says I am wrong, which I know I am not. The font appears to about 2px larger in IE. I do not mind that, but what can I do to increase the size in FF so that is closer to IE?

In FF, hit Ctrl+.