I don't understand this behavior

IE8 and Firefox

[bzgzd]

Hi.

Can someone please explain this:
(I use xhtml strict)

<table>
<tr style="padding: 0; margin: 0;">
<td style="background: red; height: 100px; width: 100px; padding: 50px 0 0 50px;">x</td>
</tr>
</table>

My expectation would be red square with dimension 100x100

IE8 displays 150x150
Firefox 150x100 (width 150)

Why? Why they are not same and why not like I want? :-)

[tangor]

If you want xy of 100 why the 50 padding?

[bzgzd]

Oh, sorry... my bad. I forgot padding is added to content height and width.

And I think I found out also why Firefox ignores setting height.

When I add "display: block" to td element also FF makes it 150x150.

Problem is I want to use it on cell with colspan="2" ...

[londrum]

you could try using <colgroup>, which can encompass both of the cells, and putting a width on that. and then put the height on the <td> cells themselves.