NotMuchOfAProgrammer NotMuchOfAProgrammer - 1 month ago 6
HTML Question

<tr> height displaying incorrectly

I've been beating my head against a really stupid problem for the last while. Why can't I get the cell separating the two boxes to properly display at 9px?? I've done the math a couple of times and it works out, and yet in the cell w/ the arrow pointing towards it, it's adding extra height:

enter image description here

I actually appears to be doubling the 9 px height set for it (18px approx). Why?? This makes no sense.

<!-- BIG WRAPPER TABLE FOR CENTRAL CONTENT -->
<table width="700px" border="0" cellspacing="0" cellpadding="0" class="homepage">
<tr align="center">
<td>

<table width="681" height="451" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td rowspan="3" bgcolor="#FF66CC">Image will go here</td>
<td rowspan="3" width="9">&nbsp;</td>
<td height="221" width="221" bgcolor="#3f7583">Text will go here</td>
</tr>
<tr height="9">
<td height="9" width="221" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td height="221" width="221" bgcolor="#CC0000">Image will go here</td>
</tr>
</table>


</td>
</tr>
</table>
<!-- END BIG WRAPPER TABLE -->

Answer

this is because of your td

 <td height="9" width="221" bgcolor="#FFFFFF">&nbsp;</td>

It is taking the height of your &nbsp; when rendered with normal font size, just remove it and it should work.

Here is the working fiddle