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> </td>
<td> </td>
<td> </td>
</tr>
</table>
