specifying size of text mouseover over a background image

how to do it?

[Lorel]

I have a row of buttons with each one in a table cell with the button images set as background via CSS so I can arrange the text to float over them (search engine friendly).

They are working fine but I would like to extend the area of the mouseover it will encompass the whole button. I added height and width to the CSS buttonlink code but it's not working.

Here is part of the code for buttonlinks:

a.buttonlinks:link {color: #FFff99;
text-decoration: none;
font-size:20px;
width: 154px;
height: 132px;
text-align:center;
vertical-align:65%;
font-style: italic;
font-family: 'MS Serif', 'hoefler text', serif; }

here is one of the button IDs referenced from one of the TD tags that makes the image load as a background:

#widget1 {background-image: url(images/widget1.jpg);
background-repeat: no-repeat;
background-position: bottom center; }

Can anyone tell me how to extend the mouseover to cover the whole button?

[Setek]

anchors are by default

display: inline;

which won't accept width and height properties.

You should first set it to

display: block;

then everything should be peachy.