Menu
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.
918
style=font-size:12px, change 12 to whatever font size suits your needs. You could add this code inline to the <table> tag, the <tr> tag or to each <th> tag. A few options but this is the code you need: style=font-size:12px, change 12 to whatever font size suits your needs.
This is not about inheritance at all. When you set font-size on an element, the element certainly does not inherit font size. This is about the effect of the relative nature of the em unit.
font-weight can also fail to work if the font you are using does not have those weights in existence – you will often hit this when embedding custom fonts. In those cases the browser will likely round the number to the closest weight that it does have available.
If your visitors are using Cascading Style Sheets enabled browsers such as {X_CSSBROWSERS} or compatible, you could use the TD{font-family: Arial; font-size: 10pt;} style sheet tag as follows. Doing so will make text inside all TD tags use the specified font face and other specified attributes such as the font size.
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.
111
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/
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
