ansaurus

Question

Different behavior of padding-bottom in table row between IE and FF

Answer 1

+2 A:

IE and Firefox have different rules around how the box model works.

The best way to think of this is that IE is taking the set height of that cell then adding the padding to it. This results in a cell height of 200px.

Whereas Firefox is taking the height of the content of the cell, then applying the padding to it. Because the content height + padding does not exceed the set height of the cell, the cell is not expanded.

You might try playing with a couple of doctypes to see if you can get them to match up, but I dont think IE 7 and FF3 match up for this situation regardless of DOCTYPE. Also, look into possibly using a reset style sheet to get the default margin's, font sizes, etc to match.

I took your test and did the following to make it looks the same in both browsers:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title>test</title>
<style>
    * {margin:0px; padding:0px;font-family: arial;font-size:14px;}
    span { border: solid 1px black; margin-top:4px;display:block;}
    .first { border:solid 1px blue; }
    .second {border:solid 1px orange; }
    .third {border:solid 1px yellow;}
    .paddit {padding-bottom:10px;height:180px;}

</style>
</head>
<body>
<table style="width:200px;background:#660000; float:left">
    <tr valign="top">
     <td class="first" style="height:20px;"><span>first row</span></td>
    </tr>
    <tr valign="top">
     <td class="second paddit"><span>second row. This is a long test to see what happens when a lot of content is placed in here; and I need more content.This is a long test to see what happens when a lot of content is placed in here; and I need more content.This is a long test to see what happens when a lot of content is placed in here; and I need more content.</span></td>
    </tr>
    <tr valign="top">
     <td class="third" style="height:180px;"><span>third row</span></td>
    </tr>
</table>
<table style="width:200px;background:#006600; float:left">
    <tr valign="top">
     <td class="first" style="height:20px;"><span>first row</span></td>
    </tr>
    <tr valign="top">
     <td class="second" style="height:180px;"><span>second row</span></td>
    </tr>
    <tr valign="top">
     <td class="third" style="height:180px;"><span>third row</span></td>
    </tr>
</table>
</body>
</html>

Chris Lively 2009-03-05 16:43:32

ansaurus

tags:

views:

answers:

Different behavior of padding-bottom in table row between IE and FF

related questions