rollover button at the very bottom of a banner

Hi

I was wondering if anyone can help. I have a very simple table row with a button. I am trying to place it at the very bottom of the row.

[code=php] <table id=”container” cellspacing=0>

<tr id=”banner”>
<td style=’vertical-align:bottom; padding:0; margin:0′>

<span id=button ><a href=”/dest”><img alt=dest src=”images/button.jpg” ></a></span>

</td>
</tr>

</table>
[/code]

Something like this. It goes to the bottom on ie7, but cant seem to get it there on ff and opera, any ideas on the best way to do achieve this. Should I be using baseline instead of bottom?

Question 2 – more advanced:

Eventually I want the button to have a rollover text.

[code=php]#button a:hover img
{
visibility:hidden
}
#button a:active {
background-image: url(“images/button.jpg”)
}
#button a:hover {
background-image: url(“images/button_rollover.jpg”)
}
[/code]

This works okish in IE and opera, but the rollover flies all over the place in FF. Any ideas?

Also in #HTML _↴