Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Strict Doctype Imposes Minimum Table Row Height In Ff/chrome

Post a Comment
Something i'd never noticed before, but it seems that in Chrome/Firefox (and probably Opera/Safari, i've not checked those specifically) using a strict doctype prevents table rows

Solution 1:

You need to set the line-height on the <td> aswell as the <span>

td{line-height:8px;}

Solution 2:

Heres a better explination:

View the code below in your browser.

Notice that even though we've set the font-size of the second set of <span> tags the actual table cells are the same size.

This is because the font size of the table cells IS still the same. We've only changed a child element of them, ie the <span>

setting body{font-size:8px} would work fine as the table will inherit this value. You can also use it directly on the table ie table{font-size:8px}, or you can use it on the cell as posted above.

<!DOCTYPE htmlPUBLIC"-//W3C//DTD Xhtml 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"lang="en"><head><style>body{}
    td{}
    span {font-family: Verdana;}

    span.small{font-size:8px;}
  </style></head><body><h1>Default font size</h1><tablecellspacing="1"border="1"cellpadding="0"><tbody><tr><td><span>One</span></td><td><span>Two</span></td><td><span>Three</span></td></tr><tr><td><span>Four</span></td><td><span>Five</span></td><td><span>Six</span></td></tr><tr><td><span>Seven</span></td><td><span>Eight</span></td><td><span>Nine</span></td></tr></tbody></table><h2>8px font size</h2><tablecellspacing="1"border="1"cellpadding="0"><tbody><tr><td><spanclass="small">One</span></td><td><spanclass="small">Two</span></td><td><spanclass="small">Three</span></td></tr><tr><td><spanclass="small">Four</span></td><td><spanclass="small">Five</span></td><td><spanclass="small">Six</span></td></tr><tr><td><spanclass="small">Seven</span></td><td><spanclass="small">Eight</span></td><td><spanclass="small">Nine</span></td></tr></tbody></table></body></html>

Hope this helps

Post a Comment for "Strict Doctype Imposes Minimum Table Row Height In Ff/chrome"