Help with table width

[lgenelle]

Hello,
I can't figure this out for the life of me! I used almost the exact same code on several pages with no problems, but this page is not displaying correctly in IE. The only difference is that the table width is smaller than on my other pages. I've tried changing the width using CSS and putting it directly in the <td> and <table>.

(And yes, I know that the code could look cleaner by putting all of the style attributes in CSS. However, I put the style attributes directly in the <td> to see if that would help.)

What's really weird is that it displays the first table in the loop fine. But the second table is wider than the first. And this only happens in IE - Firefox is fine.
Any thoughts would be greatly appreciated!

Here is that particular section of code:

 <?php do{ ?>
      <p> 
       <table class="newstable">
        <tr>
          <td colspan = "2" style="vertical-align:top; font-family:Georgia, 'Times New Roman', Times, serif; font-size:24px; color:#696; width:425px"><center><?php echo $row_RegularNews['Title']; ?></center></td>
        </tr>
      <tr>
         <td  colspan = "2" style="font-size:18px; color:#000; background-color:#93b876; font-family:Georgia, 'Times New Roman', Times, serif; width:425px"><center>News Story</center></td>
      </tr>
      <tr>
         <td  colspan = "2" style="width:425px" ><?php echo $row_RegularNews['Article']; ?></td>
      </tr>

      <?php if ($row_RegularNews['RelatedLink']){?>
         <tr>
            <td  colspan = "2" style="font-size:18px; color:#000; font-family:Georgia, 'Times New Roman', Times, serif; background-color:#93b876; width:425px"><center>Related Link</center></td>
        </tr>
        <tr>
           <td  colspan = "2" style="width:425px"><a href="<?php echo $row_RegularNews['RelatedLink']; ?>" target="_blank"><?php echo $row_RegularNews['RelatedLink']; ?></a></td>
      </tr>
    <?php } ?>

    </table>
</p>
<?php } while ($row_RegularNews = mysql_fetch_assoc($RegularNews)); ?>

Here is part of the CSS:

/* start - table */

table {

    border-collapse: collapse;

    margin: 10px;       

}

tr { background: #fff; }

tr.altrow { background: #F9F9F9;    }

th, td {

    text-align: left;           

    border-width: 1px;

    border-style: solid;

}

th {

    color: #7BA857;

    background: #EFFAE6;

    padding: .8em 1em;  

    border-color: #DFF4D5 #D3EFC3 #A7DF8A #D3EFC3;  

}

td {

    border-color: #EFEFEF;  

    padding: .7em 1em;  

}   

table.newstable{
    width:425px;
}

Fine for me. Why the <p> tag?
Do you have exceptionally long words??

[MidiMagic]

Be aware that IE puts the margin, border, and padding INSIDE the defined widths and heights. The other browsers (and the W3C standard) put them outside.

To fix this, never place width or height attributes on the same tag (or in styles applied to the same tag) that has a margin, border, or padding attribute applied.