Question

I’ve tried so many things I can’t figure out why the sprites aren’t showing up. There are 3 states for the button: normal, hover, and active.

#continue_btn {
    float: right;
    margin-right: 15px;
    width: auto;
    width: 229px;
    height: 43px;
    background-image:url(_img/continue_btn.png);
    background-repeat: no-repeat; 
    float: none;
    margin-left: -23px;
    margin-bottom: 12px;
    border-radius: 8px;    
    }
#continue_btn a{
    background: url(_img/button_sprite.png) 0 0 no-repeat -13px -11px;
    width: 229px;
    height: 43px;
}

continue_btn a:hover {
    background: url(_img/button_sprite.png) 0 0 no-repeat -14px -58px;
    width: 229px;
    height: 43px;
}
continue_btn a:active {
    background: url(_img/button_sprite.png) 0 0 no-repeat -14px -106px;
    width: 229px;
    height: 43px;
}

You can see it here (click on the user input button at top left). This is the sprite.

Answer 1

First, you forgot leading hashes in last two declarations.

Second, in your html #continue_btn is input element, but in your css you define background for some nested a tag which doesn’t (and can’t, since input is not block but inline element) exists inside your input field.

Third, I you should remove strange 0 0 declaration in background properties, it doesn’t fit into scheme.

And fourth, _img/button_sprite.png points to wrong direction. Url for your case is ../_img/button_sprite.png.

Finally, I think you need something like this:

#continue_btn {
    background: url(../_img/button_sprite.png) no-repeat -13px -11px;
    width: 229px;
    height: 43px;
}

#continue_btn:hover {
    background: url(../_img/button_sprite.png) no-repeat -14px -58px;
    width: 229px;
    height: 43px;
}
#continue_btn:active {
    background: url(../_img/button_sprite.png) no-repeat -14px -106px;
    width: 229px;
    height: 43px;
}