Comment author name renders nicely in Chrome, but half blank in IE 8

Question

Hello,

In the code below, the $row["username"] is the author of a comment. It renders well in Chrome, but in IE 8, only the top half of it appears. Any idea how to make it so all of it appears in IE 8?

Thanks in advance,

John

The code:

echo "<table class=\"commentecho\">";
$count = 1;
while ($row = mysql_fetch_array($result)) { 
    $dt1 = new DateTime($row["datecommented"], $tzFrom1);  
    $dt1->setTimezone($tzTo1);
    echo '<tr>';
    echo '<td rowspan="3" class="commentnamecount">'.$count++.'.</td>';
    echo '<td class="commentname2"><a href="http://www...com/.../members/index.php?profile='.$row["username"].'"&gt;'.$row["username"].'&lt;/a&gt;&lt;/td&gt;';
    echo '<td rowspan="3" class="commentname1">'.stripslashes($row["comment"]).'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td class="commentname2">'.$dt1->format('F j, Y').'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td class="commentname2a">'.$dt1->format('g:i a').'</td>';
    echo '</tr>';
    }
echo "</table>";    

The CSS:

table.commentecho {
    margin-top: 230px;
    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: 14px;
   overflow:hidden;

}

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

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

.commentname2 { width: 120px;
            color: #000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: normal;
            height: 20px;
            padding-top:0px;
            padding-bottom: 0px;
            vertical-align: top;

}

.commentname2 a{ width: 120px;
            color: #004284;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: bold;
            height: 20px;
            padding-top:0px;
            padding-bottom: 0px;
            vertical-align: top;

}

.commentname2 a:hover{ width: 120px;
            color: #004284;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: bold;
            text-decoration: underline;
            height: 20px;
            padding-top:0px;
            padding-bottom: 0px;
            vertical-align: top;

}   

Answer 1

Add this to your CSS:

.commentname2 a {
    display: block;
    zoom: 1;
    /* all other CSS */
}

The zoom: 1 may not be necessary, but sometimes IE needs it to trigger its hasLayout flag and stop content from getting cut or rendered incorrectly.

Answer 2

You specify that the TDs are 14px tall, and overflow is hidden, but the commentname2 class is 20px tall.

IE is hiding 6 pixels of it for this reason. If a child element is going to be 20px, make the container at least 20px, or at least remove overflow:hidden.

Answer 3

You have font-size: 14px; but have several height: 14px; with padding which will count into the height.

Basically, you need to make sure that font size will fit with the other (padding) within the height of the td you have set thus the vertial space set by your CSS cuts off the charters when the font does not fit in.

This is one reason I use em instead of px - it makes the layout easier (to me at least) when considering the box model.