I have a table with dynamic data. And there is a specific line of text which should be displayed only when a user hovers over the table row. This line of text should be 'fixed' to the table cell's bottom edge.

It works so far with Firefox, but fails in IE.

Live code can be seen here: http://2010resolutions.org/test/index.html

The text in red should be fixed to the table cell's bottom border. (They will have a fixed height and width)

Any clues how to get this working in IE?

Any help is appreciated.

Here's the code:

<style>
table { 
 width: 500px;
 background: gray;
}
td { vertical-align: top; }
.wrapper { 
 position: relative; 
 background: green;
}
tr, td, .wrapper {
 height: 100%;
 padding-bottom: 0.75em;
}
.bottom {
 position: absolute;
 left: 0;
 bottom: 0;
 background: red;
}
.bottom { visibility: hidden; }
tr:hover .bottom { visibility: visible; }
</style>
<table>
  <tr class="data">
    <td>
     <div class="wrapper">
            This is line 1<br />
            This is line 2<br />
            This is line 3<br />
            <span class="bottom">Bottom line 1</span>
        </div>
    </td>
    <td>
  <div class="wrapper">
            This is line 4<br />
         This is line 5<br />
         This is line 6<br />
         <span class="bottom">Bottom line 2</span></span>
        </div>
    </td>
    <td>
     <div class="wrapper">
            This is line 7<br />
            This is line 8<br />
            This is line 9<br />
            This is line 10<br />
            This is line 11<br />
            This is line 12<br />
            <span class="bottom">Bottom line 3</span>
        </div>
    </td>
  </tr>
  <tr>
 <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>