Table renders beautifully in Chrome, but not in IE 8

Question

Hello,

The CSS below beautifully places the table styled by commentecho 250 pixels below the top of the browser window. However, in IE 8, the table starts about 2 pixels below the top of the browser window.

How can I make it do in IE 8 what it does in Chrome?

Thanks in advance,

John

table.commentecho {
    margin-top: 250px;
    margin-left: 30px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: #000000;
    width: 600px;
    table-layout:fixed;
    background-color: #FFFFFF;
    border: 2px #FFFFFF;
    border-collapse: collapse;
    border-spacing: 2px;
    padding: 1px;
    text-decoration: none;
    vertical-align: text-bottom;    
    margin-bottom: 30px;

}

table.commentecho td {
   border: 2px solid #fff;  
   text-align: left; 
   height: 18px;
   overflow:hidden;

}

table.commentecho td a{
   padding: 2px;
   color: #3399CC;
   text-decoration: none;
   font-weight:bold;
   overflow:hidden;
   height: 18px;
}

table.commentecho td a:hover{
   background-color: #3399CC;
   padding: 2px;
   color: #FFFFFF;
   text-decoration: none;
   font-weight:bold;
   overflow:hidden;
   height: 18px;
}   

EDIT: Here is an example of rendered HTML:

    <table class="samplesrec">
<tr>
<td class="sitename1"><a href="http://www.zipps-sportscafe.com" TARGET="_blank">Where to go if You're Not Trying to Lose Weight</a>  <div class="dispurl">zipps-sportscafe.com</div></td></tr><tr><td class="sitename2name">Submitted by <a href="http://www.domain.com/sample/members/index.php?profile=johnjohn2"&gt;johnjohn2&lt;/a&gt; on June 16, 2010 &nbsp &nbsp 9:56 am</td>
</tr>
<tr>
<td class="sitename2"><a href="http://www.domain.com/sample/comments/index.php?submissionid=58"&gt;4 comments</a></td>
</tr>
</table>


<table class="commentecho">
<tr>
<td rowspan="3" class="commentnamecount">1.</td>
<td class="commentname2"><a href="http://www.domain.com/sample/members/index.php?profile=johnjohn2"&gt;johnjohn2&lt;/a&gt;&lt;/td&gt;

<td rowspan="3" class="commentname1">Talk about fatty food...</td></tr><tr><td class="commentname2">June 16, 2010</td></tr>

<tr><td class="commentname2a">9:56 am</td></tr><tr><td rowspan="3" class="commentnamecount">2.</td><td class="commentname2"><a href="http://www.domain.com/sample/members/index.php?profile=johnjohn2"&gt;johnjohn2&lt;/a&gt;&lt;/td&gt;

<td rowspan="3" class="commentname1">Okay, but you have to admit, it's pretty tasty.  Wash it all down with a Coke.  Can't beat a stomach full of grease and a caffeine buzz / sugar rush.  </td></tr>

<tr><td class="commentname2">June 16, 2010</td></tr>

<tr><td class="commentname2a">9:58 am</td></tr>

<tr><td rowspan="3" class="commentnamecount">3.</td><td class="commentname2"><a href="http://www.domain.com/sample/members/index.php?profile=johnjohn2"&gt;johnjohn2&lt;/a&gt;&lt;/td&gt;&lt;td rowspan="3" class="commentname1">They slather the mayo onto their sandwiches.  But hey, sometimes it's okay to indulge.  </td></tr>

<tr><td class="commentname2">June 16, 2010</td></tr><tr><td class="commentname2a">2:25 pm</td></tr>

<tr><td rowspan="3" class="commentnamecount">4.</td><td class="commentname2"><a href="http://www.domain.com/sample/members/index.php?profile=johnjohn2"&gt;johnjohn2&lt;/a&gt;&lt;/td&gt;&lt;td rowspan="3" class="commentname1">Hmm...</td></tr>

<tr><td class="commentname2">June 18, 2010</td></tr><tr><td class="commentname2a">3:07 pm</td></tr></table>

Answer 1

Quickest way would be to add a css class conditionally for IE8 and any of the other ie 8 browsers.

<!--[if IE 8]>    
<style type="text\css">
.IE8tableFix
{
//a quick css hack to fix the table
}
</style>
<![endif]-->

you could do something like the above or output a specific link to a css style sheet for any version of ie you like.

here is a good link http://www.quirksmode.org/css/condcom.html to conditional comments in ie