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

Question

I have a problem whereby I have set the body font-size to 11px, but tables display font at 16px. I have no idea whats causing this - I have been over the CSS and the output

Answer 1

Ever wonder why an

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.