ansaurus

Question

Strict DocType imposes minimum table row height in FF/Chrome

Answer 1

A:

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

td{line-height:8px;}

Rocket Ronnie 2010-10-14 11:49:04

Thanks, that's got it. Any idea why the default seems to be about 23px? Seems a weird thing to impose, in strict mode only

Hoodlum 2010-10-15 10:33:04

You hadn't set a font size or line height for the document, just the span tag, so the default was being used. If for example you set the body to font-size:8px all child elemnts would take on this value, including your td tag.

Rocket Ronnie 2010-10-15 11:41:04

Answer 2

A:

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 html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="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>
  <table cellspacing="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>
   <table cellspacing="1" border="1" cellpadding="0">
    <tbody>
        <tr>
          <td><span class="small">One</span></td>
          <td><span class="small">Two</span></td>
          <td><span class="small">Three</span></td>
        </tr>
        <tr>
          <td><span class="small">Four</span></td>
          <td><span class="small">Five</span></td>
          <td><span class="small">Six</span></td>
        </tr>
        <tr>
          <td><span class="small">Seven</span></td>
          <td><span class="small">Eight</span></td>
          <td><span class="small">Nine</span></td>
        </tr>
    </tbody>
  </table>

</body>
</html>

Hope this helps

Rocket Ronnie 2010-10-15 11:56:12

That's great, thanks for helping to clear it up. Just marginally confused as to why strict mode imposes a default font size on all elements, whereas transitional seems to have none

Hoodlum 2010-10-15 14:15:23

ansaurus

tags:

views:

answers:

Strict DocType imposes minimum table row height in FF/Chrome

related questions