1

I'm using this body style

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    margin: 0;
}

However, in IE7 and IE8, the font is smaller than in Firefox. What could be the problem?

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
Shankaralwar
  • 219
  • 1
  • 2
  • 6

3 Answers3

1

Nope - nothing wrong. Browsers just render differently.

If you need to, try searching for "internet explorer specific css" and you should find MANY examples of how you can tweak certain chunks of your CSS to be specific to internet explorer - for example you can specify the font be a bit larger if in IEx.

Dave
  • 28,833
  • 23
  • 113
  • 183
1

What you need is a CSS Reset stylesheet, like YUI CSS Reset and CSS Fonts.

Basically, those CSS styles are meant to be the first styles appearing in your page, and they aim to display the same elements in the same way across all browsers.

It's really a good practice to use them, they save a lot of time trying to adjust things by yourself for each browser.

To clarify, what YUI Fonts do is assigning percentage value for fonts. As you can see reading this article, using px values for fonts may cause them to be rendered inconsistently among different browsers (even on the same OS). This is because every browsers simply has a different way of dealing with fonts.

Using percentage values is a much better way of size fonts, and maintain browser zoom support.

After including YUI Fonts reset, to correctly size fonts from there on you can refer to the following table for using the right percentage values.

You may also want to take a look at this question.

Community
  • 1
  • 1
Jose Faeti
  • 12,126
  • 5
  • 38
  • 52
  • Based on the question, I can’t see a reset stylesheet doing much here. – Paul D. Waite Aug 25 '11 at 13:44
  • You may want to take a look at [YUI Fonts](http://developer.yahoo.com/yui/fonts/) reset. It tries to normalize font sizing and displaying among all browsers. Since the problem of the question is different font sizing, this may be able to help. – Jose Faeti Aug 25 '11 at 13:56
  • Possibly, but look at the code. All it does is set the `font-family` and `font-size` on `body`. What magic do you think the YUI fonts reset is going to work that gives any different results? There may well be some code the OP isn’t showing us, but based on what’s in the question, I don’t see much scope for a CSS reset helping. – Paul D. Waite Aug 25 '11 at 14:52
  • The magic YUI does is normalize all fonts, so that from there on you don't have to use px values anymore (inconsistent among browsers) but percentage values (correct percentage values from their [table](http://developer.yahoo.com/yui/examples/fonts/fonts-size_source.html)), and the fonts will display correctly across different browsers. The key point is not to use fixed sized fonts anymore. – Jose Faeti Aug 25 '11 at 15:01
  • I still don’t see how that would solve the OP’s problem of `body {font-size: 12px;}` displaying differently in Firefox and IE. Pixel values for fonts aren’t inconsistent among browsers. – Paul D. Waite Aug 26 '11 at 09:04
  • You may want to read [this](http://www.alistapart.com/d/howtosizetextincss/ss-test-1.html) article maybe. Look at the pictures. Even at 100% zoom, a pixel font value is rendered differently among browsers. Using a better approach like the last examples, the fonts are rendered much better between different browsers. – Jose Faeti Aug 26 '11 at 09:13
  • as far as I can tell, that’s a comparison between Mac and Windows, which you’d expect to have different font rendering because the operating system renders the font (at least for IE and Safari). CSS can’t do much about the operating system’s rendering of the font. – Paul D. Waite Aug 26 '11 at 12:11
  • Sorry I noticed only now that I gave you a wrong link, the article link is [this](http://www.alistapart.com/articles/howtosizetextincss/). Read it all and look at the tests carefully. Different browsers display fonts differently even at 100% zoom using px values. Using other techniques together with percentage fonts size works much better. Anyway I think it's not good to continue this discussion here, if you still have some doubts after reading that article we can talk about that in chat maybe. – Jose Faeti Aug 26 '11 at 12:18
0

I set up a test page using your style sheet sample, but I don't see any difference in size between Firefox and IE8 whatsoever. Perhaps there are other CSS rules causing your particular problem?

I generally use ems to normalize font sizes and haven't had any issues. IE6 didn't allow users to re-size text that had been sized in pixels, so we abandoned the use of px.

The default size for 'medium' text in all browsers is 16px. Adjusting this size by 62.5% brings the size down to 10px. (16 * 0.625 = 10) This reduces the mathematical complexity of computing font size. Now you can think in pixels but set sizes in ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc. See http://clagnut.com/blog/348/.

<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
    font: normal 62.5% Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    margin: 0;
}

#content {
    font-size: 1.2em;
}
</style>
</head>

<body>
    <div id="content">
        <h1>Test Page</h1>

        <p>Duis commodo hendrerit arcu, nec tincidunt est malesuada vel. Nunc
        sodales nisl vel dui mattis pulvinar. Vestibulum vel malesuada augue.
        Aliquam vel tristique sem. Sed at leo et felis ultrices facilisis. In
        hac habitasse platea dictumst. Fusce id sapien eros. Nulla facilisi.
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus.</p>
    </div>
</body>
</html>

As an aside: you might also consider using the line-height property to adjust the spacing between lines in a paragraph. Wider spacing between lines makes the text much easier to read.

Herbert
  • 5,698
  • 2
  • 26
  • 34