Hi

I am trying to produce some expanding css buttons. This I have done successfully but I am unable to get the button to center within the TD underneath the image.

See www.barntheatre.co.uk/p7.html

If I take the LEFT FLOAT off, the button does center but also it expands to the full TD space available not to the amount of text in the button itself.

Any ideas?

Thanks

John

This is the set of styles for the Button itself

a.grey_button {
height: 20px;
margin-right: 6px;
padding-right: 20px; /* sliding doors padding */
text-decoration: none; background-attachment: scroll;
background-color: transparent;
background-image: url(../_images/grey_button.png);
background-repeat: no-repeat;
background-position: right top;
font-family: arial, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
float: left;
display: block;
margin-bottom: 10px; }

a.grey_button:hover {
color: #FFFFFF;
background-position: right -20px;
font-weight: normal;
text-decoration: none; }

a.grey_button span {
display: block;
line-height: 10px;
background-image: url(../_images/grey_button_SPAN.png);
background-repeat: no-repeat;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 18px;
color: #000000;
text-decoration: none; }

a.grey_button:hover span {
background-color: transparent;
background-repeat: no-repeat;
background-position: left -20px;
text-decoration: none;
color: #FFFFFF; }


John