Font sizes (IE vs. other browsers)

[Rmpl]

I'm working on a layout where the content is meant to fit the space on the page without scrolling. This has led me to notice a difference in the way IE interprets font size vs. the way other browsers do it. If this is my code:


body
{
font-size:90%;
}

then IE ends up with a font size slightly larger than other browsers. But maybe this is to be expected. Maybe IE just has a larger default font size that my relative size is scaling. But if this is my code:


body
{
font-size:14px;
}

then the problem is still exactly the same. IE will have a slightly larger font. This defies everything I know. It seems to me that a pixel is a pixel, regardless of browser.

My question:

I'm using two stylesheets to solve this problem, one for IE and a default one. How do I make all browsers show the same font size without using separate stylesheets?

[Arbitrator]

body
{
font-size:90%;
}

then IE ends up with a font size slightly larger than other browsers. But maybe this is to be expected.The is based on a percentage of the font size for the parent element (in this case, html). If no font size is specified for that, then the browser’s font size will be used. So, if the user defines a default font size of 20 pixels and no font size is specified for the html element, then the font size for contents of the body element will be 18 pixels.

The default font size may differ from browser to browser or even user to user, since some browsers allow users to specify a custom default font size.

body
{
font-size:14px;
}then the problem is still exactly the same. IE will have a slightly larger font. This defies everything I know. It seems to me that a pixel is a pixel, regardless of browser.Pixels are relative units. Their size is relative to the resolution, I believe. So, for two browsers on the same monitor that strictly followed that definition, the font size would be identical. I don’t think that browsers do strictly follow the definition though and CSS2.1 seems to allow for that.

The only absolute units are inches, centimeters, millimeters, points, and picas, although I wouldn’t be surprised if there were rendering differences there too. If a browser has no way to determine those, for example, it can guess.

[Rmpl]

OK, I figured out the problem but I still need a solution.

It's a Mac/Windows issue. I was only testing FF in Mac. And I was testing IE in Windows. Browsers in Windows are displaying the fonts bigger regardless of what browser it is.

So the question is:

What's the standard (in relation to font size) that will unite Windows and Mac?

[felgall]

Try setting the font size in 'em'

[Rmpl]

I did. The em method scales the text based on the parent's size, similar to the % method.

[_Aerospace_Eng_]

Mac has always rendered font sizes slightly larger. Not really anything you can do about it.

[Rmpl]

Well, that sucks.

[Arbitrator]

Well, that sucks.If you need to control things down to the pixel, HTML and CSS are the wrong medium. Try something like PDF or an image format.

[Rmpl]

Good point. Flash seems like it's the best job for this actually...but I don't know actionscript.