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 <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.

Answer 2

Are the browsers rendering in quirks mode? Apparently quirks mode recreates some legacy behavior where tables do not inherit properly:

http://web.archive.org/web/20120718183019/http://devedge-temp.mozilla.org/viewsource/2002/table-inherit/

Answer 3

Don't know what the reason for this is, but since my beginning with CSS & HTML 8 years ago, this was always the case, that tables don't inherit the font-size from the body. Same goes for select- and input-elements.

So I always do something like:

body, table, select, input {
    font-size: 12px;
    font-family: arial, tahoma, sans-serif;
}

So this is kind of a workaround, that works for me.

Answer 4

I just found out what the answer is - it was the doctype. I think Dreamweaver, Visual Studio and Eclipse PHP all create the files with doctype set to strict, whereas netbeans sets it to transitional. Change transitional to strict and the inheritance from body to tables works fine.

Thanks for the help anyway everyone.

Regards,

Richard

Answer 5

Make sure you have the DOCTYPE set correctly (W3C will have details) ...

OR

table {
   font-size: 1em;
}

And all will be well ;)