IE – Bigger Font Size v. Firefox

I was up late last night working to make a site functional across browsers. Anyone who does web design knows what those nights are like. I couldn’t sleep until I figured things out. Part of the reason was it took a long time for me to find an answer – which, in the end, I had to reason through myself. Since it isn’t very often that you are able to Google your problem and find the same problem (with a solution) somewhere else, here is my contribution: my problem and my solution.

I had the design tweaked in the CSS and the XHTML offline and working in Firefox. (For anyone who doesn’t already, always get your site working in Firefox first, then IE after. Trust me on that one.) Though I’m using em’s to size throughout, I list the body font size as 12px. Here is the relevant code:

body {
font-size: 12px;
p {
font-size: 1em;


< id="wrapper" >
< id="content" >
< id="maincontent" >
< p >This is where text would go. < / p >

Everything after “maincontent” was the size I wanted in Firefox but not the size I wanted in IE. More specifically, everything (anything sized in ems, which meant the widths of columns, margins, and font sizes) was around 10× the size I wanted it to be. Needless to say it caught my eye.

After about an hour of struggling with it I discovered that IE assigns its own base font size unless something is specified in the parent container. So in Firefox (the correct browser) when no specification is found in the parent element it checks the next highest, the next highest, and finally the body defined font size. Firefox uses the 12px size I specified. To correct for IE, though, I had to duplicate my font specification in the direct container of “p” — that is, “maincontent.”

Everything is working well right now. I’d love to talk about the project this is for (a fairly personal one) but I would rather wait until its ready for release. I hope this post helps someone else with the same problem somewhere down the line — I know it really pissed me off last night.

6 thoughts on “IE – Bigger Font Size v. Firefox

  1. Thanks Ryan,

    I came to your page while searching for a solution to this same problem. Although you gave some very good pointers, the problem persists in my case. At least now I know the direction I must be moving to.

    I also tried ensuring that the document has no unclosed tags (which sometimes breaks things), but to no avail.

    Anyway, thanks for your input.


  2. Sorry, forgot have a small rant on IE 🙂

    I forgot to mention that ironically enough, “good css design” guides instruct developers to avoid using absolute sizes (px, pt) almost everywhere and instead use relative values (medium, em, % etc.).

    Looks like we still have a very long way to go till we get there.

    (And yes, I also first develop for FF and then test for IE [ sometimes 😉 ])

  3. Sorry my experience couldn’t completely help you out.

    As far as absolute sizes, you’re right. This is a bit outdated. Anymore I use percentages, I believe 62.5% in the body styles.

    What site are you trying to fix?

  4. Found it!

    Just wanted to share this with the rest of the poor souls who are having fun with IE’s… features.

    We all know that IE resets/disregards the font-size attribute when it enters a table, right?

    In my CSS I even have a line
    table {font-size:inherit !important;}

    The problem was that I was entering a table.
    I had to explicitly add a style=”font-size:inherit !important;” inside the tag.

    So, guys, keep this in mind: always explicitly inherit the font-size in a table.

    Hope this helps,


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s