CSS Unwanted padding in IE using floats

It's been a long day of designing and I ran into a problem today. The website www.dcninc.com/newtest/security_testing.php is a new design I'm working on at work right now.

If you view it in Firefox you will notice there is no padding on the 2 right boxes (I did that on purpose to trouble shoot my problem) However if y开发者_如何学Pythonou view that same page in IE, it adds padding to the right side. Here is my CSS and HTML below.

• http://pastebin.com/hRxZp9ub
• http://pastebin.com/YwSYn7ti

---

You have elements nested within each other that have widths of 250.

Like this,

<table width="250"><tr width="250"></tr><table width="250"></table></table>

Since there has been some width used up with padding, there is not 250 pixels of free space for you to put inside the table. I would try lowering the width of the inner elements by 10-20 pixels.

Hope this helps. Here's the markup I was referencing,

<table border="0" cellpadding="0" cellspacing="0" width="250">
<tr>
<td width="250" height="9" style="background:url(Images/right_box_gray_top.png) no-repeat;"></td>
</tr>
<tr>
<td style="background:url(Images/right_box_gray_middle.png) repeat-y" width="250">
<div class="list-right-info">
<table border="0" cellpadding="0" cellspacing="0" width="250">
<tr>
<td width="40"><img src="Images/icons/phonepic.jpg" border="0" /></td>
<td><center>CALL US TODAY<br /> 800.xxx.xxxx</center></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="background:url(Images/right_box_gray_bottom.png) no-repeat" width="250" height="108"></td>
</tr>
</table>

---

Try to add this to the header

<!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->