Button image moves up slightly when being clicked (in Internet Explorer)

Question

Does anybody know why an image may move/jerk slightly while being clicked (only happens in IE)? This is our button:

<button class="join" name="register" value="" onClick="window.location = 'location'" tabindex="4"></button>

This is the class:

button.join {
        background: url(../images/join.png);
        border: 0;
        height:  56px;
        width: 178px;
        cursor: pointer;
        }

Answer 1

Button tags are always a hassle to get styled correctly cross-browser. As long as you're using javascript for the onClick there's no real reason to use the button tag. Try using an anchor tag, targeting all states and setting the position of the image.

<a class="join" href="#" id="register" onClick="window.location = 'location'" tabindex="4">Button</a>

a.join:link,
a.join:visited
a.join:hover,
a.join:active
{
        background: url(../images/join.png) 0 0 no-repeat;
        border: 0;
        text-indent: -999em; /* Optional - To remove the HTML text from the button */
        height:  56px;
        width: 178px;
        cursor: pointer;
}