Question

I can’t make td ‘Date’ to have fixed height. If there is less in Body section td Date element is bigger than it should be – even if I set Date height to 10% and Body height to 90%. Any suggestions?

<tr>   <td class='Author' rowspan='2'>     <a href='#'>Claude</a><br />     <a href='#'><img src='Users/4/Avatar.jpeg' style='border-width:0px;' /></a>           </td>   <td class='Date'>     Sent:     <span>18.08.2008 20:49:28</span>   </td> </tr> <tr>   <td class='Body'>     <span>Id lacinia lacus arcu non quis mollis sit. Ligula elit. Ultricies elit cursus. Quis ipsum nec rutrum id tellus aliquam. Tortor arcu fermentum nibh justo leo ante vitae fringilla. Pulvinar aliquam. Fringilla mollis facilisis.</span>   </td> </tr> 

And my css for now is:

table.ForumThreadViewer td.Date {   text-align: left;   vertical-align: top;   font-size: xx-small;   border-bottom: solid 1 black;   height: 20px; }  table.ForumThreadViewer td.Body {   text-align: left;   vertical-align: top;   border-top: solid 1 black; }  table.ForumThreadViewer td.Author {   vertical-align: top;   text-align: left; } 

It’s working for FF but not for IE. 🙁

Answer 1

Oli is right! Give then screenshot you posted, you are using the wrong markup. You could use something more like this:

<div class='post'>   <div class='author'>     <a href='#'>Claude</a><br />     <a href='#'><img src='Users/4/Avatar.jpeg' /></a>           </div>   <div class='content'>     <div class='date'>Sent: 18.08.2008 20:49:28</div>     <div class='body'>       This is the content of the message.     </div>   </div>   <div class='clear'>&nbsp;</div> </div> 

with css like this:

div.post {   border: 1px solid #999;   margin-bottom: -1px; /* collapse the borders between posts */ } div.author {   float: left;   width: 150px;   border-right: 1px solid #999; } div.content {   border-left: 1px solid #999;   margin-left: 150px; } div.date {   border-bottom: 1px solid #999; } div.clear {   clear: both;   height: 0;   line-height: 0; }