Question

The table below echos out great in Chrome, Firefox, and Safari. The left part of it displays like this:

However, in Internet Explorer 8, the left part sometimes displays like this:

In IE8, with short comments, only the top part of the variable $row["username"], which is “admin” in the screenshots, is showing. How can I make it so IE8 will show the full $row["username"] in such a situation?

Thanks in advance,

John

The source 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 style="border-left:2px solid #004993; border-bottom:2px solid #004993; border-top:2px solid #004993;" rowspan="3" class="commentnamecount">'.$count++.'</td>';
    echo '<td style="background: #CAE1FF; border-top:2px solid #004993;" class="commentname2user"><a href="http://www...com/.../index.php?profile='.$row["username"].'">'.$row["username"].'</a></td>';
    echo '<td style="border-right:2px solid #004993; border-bottom:2px solid #004993; border-top:2px solid #004993;" rowspan="3" class="commentname1" id="comment-' . $row["commentid"] . '">'.stripslashes($row["comment"]).'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td style="background: #CAE1FF;" class="commentname2">'.$dt1->format('F j, Y').'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td style="background: #CAE1FF; border-bottom:2px solid #004993;" class="commentname2a">'.$dt1->format('g:i a').'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td class="commentname2a"></td>';
    echo '</tr>';
    }
echo "</table>";

The CSS:

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

}

table.commentecho td {
   border: 0px solid #fff;  
   text-align: left; 
   height: 20px;


}

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

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

.commentnamecount { width: 50px;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 25px;   
            overflow:hidden !important;
            color: #004993;
            font-weight: bold;
            display:table-cell;   
            vertical-align: top;
            padding-bottom: 0px;
            padding-left: 5px;
            padding-top: 2px;

}


.commentname2user { width: 120px;
            color: #000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 14px;
            font-weight: normal;
            height: 50px;
            padding-top:5px;
            padding-left: 5px;
            padding-bottom: 10px;
            vertical-align: top;

}

.commentname1 { 
            line-height: 170%;
            width: 410px;
            font-family: Georgia, "Times New Roman", Times, serif;
            overflow:hidden !important;
            color: #000000;
            padding-bottom: 30px;
            padding-left: 10px;
            vertical-align: top;
}


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

}

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

}

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

}

.commentname2a { width: 160px;
            overflow:hidden !important;
            color: #000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: normal;
            height: 40px;
            padding-top:0px;
            padding-left: 5px;
            padding-bottom: 30px;
            vertical-align: top;

}   

Answer 1

Well, you did ask for links to be only that high:

table.commentecho td a {
    height: 20px;
}

The trick is, this shouldn’t work, and doesn’t in most browsers: according to the CSS standard, height explicitly does not apply to inline elements like <a>. However in IE’s Quirks Mode it does anyway. So:

• remove the ineffective height: property
• ensure you serve your page with a Standards Mode DOCTYPE declaration. You don’t want Quirks Mode which is full of nasty legacy compatibility bugs like this.

Also remember to use htmlspecialchars() when templating data strings into HTML, or you’ll have cross-site-scripting vulnerabilities. stripslashes() does not do this job and is almost certainly a mistake.