Question

I have the following CSS to style a button and an anchor tag as they have the same button style but they are in different locations. SO I thought to give them the same CSS so that they would both render exactly the same. However, the button.enter has the text pushed down. The first one works fine. It would work with padding:0 but that would affect the first one.
Any ideas?

a.enter, button.enter {
    text-decoration: none;
    background: url('../img/enter-button_small.png') no-repeat 0px 0px;
    height: 35px;
    padding: 8px 0;
    text-align: center;
    color: white;
    margin: 0 auto;
    text-shadow: none;
    font-size: 16px;
    width: 300px;
    vertical-align: middle;
}

Answer 1

Just add another style that will reset the padding on the button alone. Some of your css is unrequired as well. vertical-align:middle; does nothing in this case for example.

a.enter, button.enter {
    text-decoration: none;
    background: url('../img/enter-button_small.png') no-repeat 0px 0px;
    height: 35px;
    padding: 8px 0;
    text-align: center;
    color: white;
    margin: 0 auto;
    text-shadow: none;
    font-size: 16px;
    width: 300px;
}

button.enter {
    padding:0;
}