Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorjac
    • CommentTimeApr 1st 2008
     permalink
    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
Add your comments
    Username Password
  • Format comments as (Help)