cross browseing ie - html

Question

I have this email creative. The bottom box is placed ok on ff and chrome, but in IE it's getting a bit weird.
What do I need to add/remove from my code in order for the bottom box to appear correctly?
Thanks.
here is the code:
<title></title>
<style type="text/css">
p
{
margin: 0px;
padding: 0px;
text-align: right;
}
a:link
{
color: #990000;
text-decoration: none;
}
a:visited
{
text-decoration: none;
color: #990000;
}
a:hover
{
text-decoration: none;
color: #990000;
}
img
{
border: none;
}
body{
margin:0px;
}
</style>
<div style="text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px;background-color: #EEF3FA">
<div style="text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 13px;background-color: #FFF;width: 720px;margin: 0px auto;">
<br />
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700">
<tbody>
<tr>
<td colspan="3">
<img src="Images/head.jpg" style="margin-bottom: 10px;" /></td>
</tr>
<tr>
<td colspan="3" style="border:2px #060">
<img src="Images/tophaedr1.jpg" style="margin-bottom: 10px;margin-right:23px;" /></td>
</tr>
</table>
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700" style="margin-right:17px;">
<!-- right -->
<tr>
<td valign="top" width="156" height="500">
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
</table>
</td>
<td valign="top" width="156" >
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
</td>
<td valign="top" width="156">
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
</td>
<!-- space -->
<!-- left -->
<td valign="top" width="180">
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
</table>
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700">
<tbody>
<tr>
<td colspan="3">
<img src="Images/pre.jpg" style="margin-bottom: 10px; margin-left: 8px; margin-top: -20px;" /></td>
<td colspan="3">
<img src="Images/logoleft.gif" style="margin-bottom: 10px; margin-left: 11px; margin-top: -10px;" /></td>
</tr>
</table>
</div>
</div>

Answer 1

You might want to stop using tables for the layout.

Answer 2

First of all I would highly recommend to stop using <table> tags for structuring a page. Thats what <div>'s are for.
IE is known to be problematic, usually I would add custom CSS rules that only apply to IE, by using the asterisk (*) marker.
#myDiv{
position: relative;
top: 20px;
left: 10px;
*top: 15px; /* Should be read only be IE */
*left: 8px; /* Should be read only be IE */
}
Shai