css image not showing in full

[esthera]

I have the following code.
The problem is the image set to the backgroudn is only showing as big as the text and not in full

the image size is 131 by 33 but it showing up smaller
Here's my code --what am I doing wrong?

css:

.leftbutton {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-image: url(images/catempty.gif);
text-align: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
width:131px;
height:33px;
}
a.leftbuttontext{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFff;
text-decoration: none;

}
a.leftbuttontext:rollover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #FFFF66;
text-decoration: none;

}


html:
<tr>
<td class=leftbutton><a href="category.asp?cat=2" class=leftbuttontext>Title</a></td></tr>

[_Aerospace_Eng_]

Try this
.leftbutton {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-image: url(images/catempty.gif);
text-align: center;
width:131px;
height:33px;
display:block;
}
a.leftbuttontext, a.leftbuttontext:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
a.leftbuttontext:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #FFFF66;
text-decoration: none;
}
<tr>
<td class="leftbutton"><a href="category.asp?cat=2" class="leftbuttontext">Title</a></td></tr>
There is no such thing as a psuedo class called rollover. For links you have , :link, :visited, :hover, :active, :focus (focus works in standards compliant browsers)

[esthera]

it's still not showing the complete width

[_Aerospace_Eng_]

Then post a link. Something else could be causing the problem, e.g. errors in your full code.

[esthera]

your right...It was somethign else and I found it...
The table it was in was smaller and before when I used images instead of css the images were forcing it.
I put in a hidden spacer though i'm wondering if there is a better way of forcing the width.

On a different note: is there anyway in the css to get the image to get bigger with bigger text but not repeat?

[_Aerospace_Eng_]

Yes and no, the image would be come distorted if too much text was present. I don't recommend this. What you would do is make the image position:absolute; and the td cell that its in position:relative; set it to top:0; left:0; with a width of 100% and height of 100% then you would set the text inside of that cell to position:relative; and make sure the text had a higher z-index than the image. Depending on the complexity of the image though you might be able to create a seemless background image. Can you post the image here as an attachment?

[esthera]

yes i see what you are saying...

attached is the image ...
this is something I do pretty often for links and switching from an image with text to css for text definately improved it.

[esthera]

.leftbutton {
font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-image: url(images/catempty.gif);
text-align: center;
width:140px;
height:33px;
display:block;
background-repeat: no-repeat;
}

How can I center it vertically as well?

[_Aerospace_Eng_]

Just revert back to the original CSS you had. It would center the background image but you would need to play around with padding to get the text centered but since you are using tables (which you shouldn't be doing) then you can just use vertical-align:middle; along with text-align:center;