Why is a table not using the body font size even though I haven’t set the table font size explicitly?

Question

Ever wonder why an <h1> looks BIG even when you don’t use any CSS rules?

This is because web browsers have default CSS rules built in. Included in this default CSS are rules for tables.

Unfortunately, these hidden CSS rules sometimes play nasty tricks on us web developers, and this is why people use Reset CSS.

So, somewhere under the hood, FireFox has decided that there is an additional rule…

table {
    font-size:16px; /* actually it's "-moz-initial"
                       you can check this using FireBug
                     */
}

Then your rule is…

body {
    font-size:11px;
}

Both these rules have a specificity of 1, so the browser gets to decide a little arbitrarily which takes precedence.

So, to fix this, either target the table yourself:

table {
    font-size:11px;
}

… Or increase the specificity of your rule.

html body { /* increased specificity! */
    font-size:11px;
}

… Or use a Reset CSS.