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
[FONT=Courier New][INDENT]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; }[/INDENT][/FONT]
John
