Question

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"].'">'.$row["username"].'</a></td>';
    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

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.