CSS - Changing table cell background on mouseover

I'm having a few headaches getting this to work how I want it -

I've currently got:

table.nt td a{display: block;} 
table.nt td a:link, table.nt td a:visited {} 
table.nt td a:hover, table.nt td a:active {background-image: url('/li/left-gradient-hover.gif'); color: #FFFFFF; text-decoration: none;} 
.lnl {margin-left: 10px; margin-top: 2px; margin-bottom: 2px;}

Code (markup):

with HTML like:

<table class="nt" width="140" border="0" cellpadding="0" cellspacing="0"> 
<tr><td class="nc"><a href="/link/" class="lnl">Link</a></td></tr></table>

Code (markup):

However onmouseover the margin pixels remain the old background. I've tried using padding on the cell, using a <div>, but I still get the same outcome.

Does anyone have any ideas how I get get this so it changes the whole cell including any padding/margins?

The website incidentally is ngaming*co*uk

 

Margins are always transparent. If you want the image to fill the entire cell, set cell's padding and cell contents' margins to zero. Use cell contents' padding to control the distance between the borders and the contents.

J.D.

 

Thanks - I've got it working now.