Rollovers with css & making a link from a table cell

[Lee]

What I am trying to achieve is having a button as a table cell background and have it swap on hover using css. I have set the css class as below to have white text (the button is black) but I want the whole table cell to be a link rather than just the text. The reason I want to do this is because I want it to work like a rollover button so you can click anywhere on the button. I find that small text displays better from the browser rather than writing the text on the image in photoshop.

Here is the code I did below. So far the rollover is working, but I can't get the link to work. Any ideas?

 

CSS

.button {
background-color: #000000;
background-image: url(images/button.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.button:hover {
background-color: #000000;
background-image: url(images/button-over.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
a.button {
background-color: #000000;
background-image: url(images/button.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
a.button:hover {
background-color: #000000;
background-image: url(images/button-over.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

 

HTML

<table width="276" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <a href="page1.html"><td width="69" height="27" align="center" valign="middle" class="button">Link 1</td></a>
    <a href="page2.html"><td width="69" height="27" align="center" valign="middle" class="button">Link 2</td></a>
    <a href="page3.html"><td width="69" height="27" align="center" valign="middle" class="button">Link 3 </td></a>
    <a href="page4.html"><td width="69" height="27" align="center" valign="middle" class="button">Link 4</td></a>
  </tr>
</table>

 

[ToonMariner]

the psuedo class :hover is only available for the a tag in ie < 7. I suggest you make a link in each cell (better still a horizontal list - tables are for data not layout!) and set display: block; give it a width and height of your image and then use the css you have.