CODEWITHSUNDEEP
htmlcssbutton
catandmouse
catandmouse

Reputation: 11809

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

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;
        }

Upvotes: 0

Views: 4877

Answers (1)

Damien
Damien

Reputation: 1217

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;
}

Upvotes: 2

Related Questions