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

html css html-table font-size

55,902

Solution 1

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/

Solution 2

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.

Solution 3

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

table {
   font-size: 1em;
}

And all will be well ;)

Solution 4

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.

Solution 5

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

View more solutions

55,902

Author by

ClarkeyBoy

I am currently developing a website in VB.Net with CSS/SASS, JQuery and JQuery UI for Heritage Art Papers Ltd which achieved 66% as my final year project at university.. It was the dissertation which let me down.. The website has a full administration frontend for editing what end users see on the customer frontend. My aim over the period I am working on it is for administrators to eventually be able to add and remove attributes for specific types of item (that is: Range, Collection, Design, RangeCollection, CollectionDesign and RangeCollectionDesign [the final product with a product code]). They will then be able to reference these in the item template for the catalogue by using square brackets. Over time the system should become very sophisticated, and should log all actions (big or small) and highlight the important ones to admin - for example hacking attempts. I know CSS/SASS, HTML (obviously), ASP, ASP.Net (VB), PHP (a bit), Java (a bit) and JQuery/JQuery UI. I would like to learn C++ or C#, but to be honest I just dont have the time at the moment. I have just started work for StepStone Solutions in Luton, as an Application Developer. Loving the job so far, having just finished my 2nd week.

Updated on July 09, 2022

Comments

ClarkeyBoy almost 2 years

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 (source when browsing to the page) time and time again. Setting table font-size to 11px explicitly has the desired effect, but I shouldn't need to set it anywhere apart from the body style.

I have the following CSS:

body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0px;
    background-color: #E7D2B8;
    color: #863F2B;
}
img.headerImg {
    width: 100%;
}
.menu-strip {
    float: left;
    width: 20%;
}
.main-content {
    float: left;
    width: 80%;
}
.clear {
    clear: both;
}
ul.menu {
    margin: 0px;
    margin-left: 10px;
    padding: 0px;
    list-style: none;
}
ul.menu li {
    margin: 0px;
    padding: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
}
div.footer {
    width: 60%;
    margin-left: 20%;
}
ul.footer-links {
    list-style: none;
}
ul.footer-links li {
    float: left;
    padding: 20px;
}
ul.footer-links li:last {
    clear: right;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td {
    vertical-align: top;
}

...and the output is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="/CustomerApp_v2/CSS/main.css" />
    </head>
    <body>
        <div class="header">
            <img class="headerImg" alt="Header image" src="/CustomerApp_v2/Images/header.png" />
        </div>
        <div class="menu-strip">
            <ul class="menu">
                <li>Home</li>
                <li>Contacts
                    <ul class="menu">
                        <li>Customers</li>
                        <li><a href="/CustomerApp_v2/Agents/Agents.php">Agents</a></li>
                        <li>Artists</li>
                        <li>Suppliers</li>
                        <li>Other</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="main-content">
            <table>
                <thead>
                    <tr>
                        <td>Code</td>
                        <td>Forename</td>
                        <td>Surname</td>
                        <td>Address</td>
                        <td>Postcode</td>
                        <td>Telephone</td>
                        <td>Fax</td>
                        <td>Edit</td>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td colspan='7'></td>
                        <td><a href='/CustomerApp_v2/Agents/Edit.php'>Create</a></td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>code4</td>
                        <td>James</td>
                        <td>Blue</td>
                        <td>address11<br />address24<br />address32<br />town5<br /></td>
                        <td>postcode4</td>
                        <td>fone4</td>
                        <td>fone2</td>
                        <td><a href='/CustomerApp_v2/Agents/Edit.php?ID=2'>Edit</a></td>
                    </tr>
                    <tr>
                        <td>code5</td>
                        <td>Fred</td>
                        <td>White</td>
                        <td>address13<br />address24<br />address31<br />town1<br /></td>
                        <td>postcode2</td>
                        <td>fone5</td>
                        <td>fone3</td>
                        <td><a href='/CustomerApp_v2/Agents/Edit.php?ID=1'>Edit</a></td>
                    </tr>
                </tbody>
            </table>
        </div><div class="clear"></div>
        <div class="footer">
            <ul class="footer-links">
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
                <li>Link 4</li>
                <li>Link 5</li>
                <li>Link 6</li>
            </ul>
        </div>
    </body>
</html>

I seriously cant see anything which could set the font-size to 16px in the table. This happens for all 3 sections (thead, tfoot, tbody). It also seems that Netbeans 6.9 will not format the table properly, but it does the rest of the document (before and after). Its almost as if there is something wrong with the table, but I can't see what. This happens in Firefox and Opera (most recent versions of both). I haven't tested it in IE because it will never be used in IE.

ClarkeyBoy almost 14 years

They shouldnt be - to put a browser in quirks mode you have to do it yourself, right? If thats the case then no, they arent.. One thing I did just think of - could it be to do with the doctype? Only I have used Netbeans 6.9 for all these pages, and it has never happened in any page before now. I am wondering if it is to do with the declaration set by Netbeans when creating the file..
ClarkeyBoy almost 14 years

I was right - I changed transitional to strict and it worked fine!
Fidi almost 14 years

It should be mentioned, that resetting also helps to develop pages with good browser-compability. I also reset margins and paddings to achieve a layout that looks almost identical within several browsers.
Bobby Jack almost 14 years

The DOCTYPE and quirks mode are inextricably linked - if you're not using a valid DOCTYPE, your browser will be rendering in quirks mode and, in FF's case, at least, using the 'quirks' stylesheet which includes styles very similar to those you are describing.
ClarkeyBoy almost 14 years

I will try using this at some point in the future. Thanks for the link.
Matt Gibson almost 14 years

Yes, this is correct. Using the correct DOCTYPE to avoid triggering quirks mode will avoid the problem. You'll find a description of what's going on in quirks mode with the table cell font-size inheritance at the bottom of quirksmode.org/css/quirksmode.html (the "font sizes of table cells" section.)
Matt Gibson almost 14 years

Incidentally, you can check the browser stylesheets in Firefox using URLs like resource://gre/res/html.css In this case, though, they show you that Firefox doesn't actually have a rule to set the font-size of table cells different from the body. If you look at the Quirks Mode CSS, though: resource://gre/res/quirk.css you'll find that in quirks mode, it sets table font-size to the browser default (font-size: -moz-initial;)
ClarkeyBoy almost 14 years

Thanks for the link.. will make sure I save it in case I have more problems in the future.
ClarkeyBoy almost 14 years

This is probably the case for IE (lets face it - IE is the most likely culprit of such a stupid glitch..!). Failing that, if you have the doctype set to transitional try setting it to strict and see if it solved the problem. I dunno what the actual differences are, but this worked for me anyhow. Regards, Richard
jezmck about 13 years

You might find it easier to use table, caption { font-size: inherit; font-weight: inherit; font-style: inherit; font-variant: inherit; }
Taryn over 10 years

@grossvogel The link you had in your answer was no longer working. I've replaced it with a version from the internet archive but it would be great if you could include some context from the link here in the event the link is not working.
Caio Mar over 8 years

I am having the same problem with my tables. My header is set to <!DOCTYPE html> according to HTML5 and I tried the transitional and strict, both did not work. I also tried applying CSS font-size inherit to the table and that also did not work. Any ideas guys?
Grzegorz over 5 years

Just one important thing, If you add, for example, var_dump before DOCTYPE then your browser might/will go into quricks also. DOCTYPE must be at beginning of document.