cell 'rollover' in table.. Ay ideas?

[cs.punk]

Ok well i have a dynamic table with data and want two submin buttons. Edit and delete.

 

The problem i am having is how to create a 'rollover' image in a table cell? I want it filling  the whole cell? Although I don't really know how to go about it with CSS.

 

My other option would be to use plain images?

 

My table:

<table id='navlist'>
<tr>
<th>Title</th>
<th width='80'>Picture</th>
<th width='80'>ID</th>
<th width='80'>Edit</th>
<th width='80'>Delete</th>
</tr>

<tr>
<td>Test</td>
<td>yes</td>
<td>1</td>
<td id='edit'><a href='/admin/delete.php?id=1'>Edit</a></td>
<td id='delete'><a href='/admin/delete.php?id=1'>Delete</a></td>
</tr>

</table>

 

And my CSS:

table#navlist {
margin: 0 0 0 0px;
padding: 0;
width: 100%;
border: 2px solid #234EC4;
background-color: #FFFFFF;
}

#navlist td {
list-style-type: none;
background-color: #6AA6FF;
color: #000000;
text-align: left;
padding: 5px;
border: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}

#navlist th {
list-style-type: none;
background-color: #6AA6FF;
color: #000000;
text-align: left;
padding: 5px;
border: 1px solid #000066;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 14px;
}

 

I was thinking making an ID for delete an edit and use a background image? Er somehow...

 

Any suggestions on how to go about this?

[n000bie]

 #navlist td:hover { background-color:red;}

 

but doesn't work in IE6 

[haku]

css:

 

td a
{
  display:block;
  width:100%;
  height:100%;
}
td a:hover
{
  background-color:red;
}