TD's reacting to mouse-overs with padding

Hi,
I'm attempting to create paragraph links where the entire TD reacts to the mouse. I seem to be almost there, but there's an obvious problem. Here's the CSS:

#table3 td{padding: 5px 5px 5px 15px;
cursor: pointer;
background-color: #FFFFFF;
border-left: 1px solid #7979A6;
border-top: 1px solid #7979A6;
border-right: 1px solid #7979A6;
border-bottom: 1px solid #7979A6;
}

#table3 td:hover{padding: 5px 5px 5px 5px;
cursor: pointer;
background-color: #7979A6;
border-left: 10px solid #FF9933;
border-top: 1px solid #FF9933;
border-right: 1px solid #FF9933;
border-bottom: 1px solid #FF9933;
}

#table3 a{COLOR: #7979A6; font-family: arial; font-size: 10pt; text-decoration: none; font-weight: bold; width:100%; cursor: pointer;display:block;}
#table3 a:hover{ COLOR: #FFFFFF;display:block;}

HTML:

And here's an example table:

<table border="0" width="150" id="table3" cellspacing="5">
	<tr>
		<td><a href="#">Small Title...<br><font style="font-size:8pt">This is a small news story. The entire cell reacts when it's mouse-overed...</font></a></td>
	</tr>
</table>

HTML:

The problem is that the mouse needs to reach the A tag for the text to change color, I'm guessing because of the padding. Isn't there a way to call a child element and apply something to that as well? Or is there a way to append margins? I've seen something like these small paragraphs done with spans, but not neatly, and certainly with a lot more HTML laying around.

If anyone has any ideas...
Thanks in advance.

 

Hiya there,

You're using the TD class to style it. That means you're giving it padding and other style, where there's no need. So instead, style the link class 'a' by using this and removing the other CSS you had before:

      #table3 td a{
		  COLOR: #7979A6; 
		  padding: 5px 5px 5px 5px;
		  font-family: arial; 
		  font-size: 10pt; 
		  text-decoration: none; 
		  font-weight: bold;
		  cursor: pointer;
		  display:block;
		  border-left: 10px solid #FF9933;
		  border-top: 1px solid #FF9933;
		  border-right: 1px solid #FF9933;
		  border-bottom: 1px solid #FF9933;
		  background:#fff;
		}

      #table3 td a:hover{ 
	 	 COLOR: #FFF;  
		 background-color: #7979A6;
	  }

Code (markup):

I removed the 'width:100%' because you'll find that IE does all sorts of fun things with that.

Enjoy mate