Nested Tables in IE width incorrect - html

Question

I am having trouble getting a table to correctly nest inside another in IE, but it works fine in Firefox and Chrome. For some reason IE is showing the cell with the nested table as much wider then it is set to be.
Simplified version of my code:
<table width="575" border="0">
<tbody>
<tr>
<td height="10" colspan="3"><span style="FONT-SIZE: 12px"><span style="FONT-FAMILY: Arial">CITY (Arial, small, all caps), Country (only if city isn't well known, Arial, small) - Content text (Arial, small) First paragraph is to be full width and above any images or related boxes, unless there is a lead.<br />
</span></span></td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
<tr>
<td width="280"><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
<td width="10"></td>
<td width="260" valign="top">
<table width="260" border="0">
<tbody>
<tr>
<td>
<div style="width:260px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
<span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
</span> • To be used when relevant links exist<br />
<span style="font-size: 2px;"><br />
</span> • Links to remain one line or shorter<br />
<span style="font-size: 2px;"><br />
</span> • Link text - Arial, small, linked<br />
</span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
</tbody>
Thank you for any help. I just can't figure out why IE won't play the same as the other browsers.

Answer 1

FYI, you can achieve this in CSS without using tables.
I changed the width from pixels to percentage and it works fine in IE now...
<tr>
<td width="44%"><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
<td width="2%"></td>
<td width="44%" valign="top">
<table width="100%" border="0">
<tbody>
<tr>
<td>
<div style="width:260px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
<span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
</span> • To be used when relevant links exist<br />
<span style="font-size: 2px;"><br />
</span> • Links to remain one line or shorter<br />
<span style="font-size: 2px;"><br />
</span> • Link text - Arial, small, linked<br />
</span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Not sure why you are using colspan="3" while you can do away with two.
Anyway, test the above code to check if this is what you are after...
Thanks.
ADDED:
I removed the width for the td's and that works fine as well. Not sure why IE is rendering it differently when the width is supplied.
<tbody>
<tr>
<td height="10" colspan="3"><span style="FONT-SIZE: 12px"><span style="FONT-FAMILY: Arial">CITY (Arial, small, all caps), Country (only if city isn't well known, Arial, small) - Content text (Arial, small) First paragraph is to be full width and above any images or related boxes, unless there is a lead.<br />
</span></span></td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
<tr>
<td><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
<td></td>
<td valign="top">
<table border="0">
<tbody>
<tr>
<td>
<div style="width:265px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
<span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
</span> • To be used when relevant links exist<br />
<span style="font-size: 2px;"><br />
</span> • Links to remain one line or shorter<br />
<span style="font-size: 2px;"><br />
</span> • Link text - Arial, small, linked<br />
</span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
</tbody>