Issue with background size of a 'changing image link/on hover' + text positioning

I seem to be having trouble with setting the correct height and width of an image link, plus I cannot move the text lower without moving the whole background.

I created a jsFiddle to show what I mean

I want the final link on the left to look like the 'link' on the right, which isn't set up yet.

Here's my code:

<p class="x"><a href="#">All Events</a></p>

.x a {
    color: #FFFFFF;
    text-decoration: none;
    text-indent:50px;
    font-weight: bold;
    background-image: url('http://i.imgur.com/TGhDs.png');
    background-position: center 0px;
    background-repeat: no开发者_Python百科-repeat;
}

.x a:hover {
    color: #8dcdff;
    text-decoration: none;
    padding-left: 0px;
    font-weight: bold;
    background-image: url('http://i.imgur.com/TGhDs.png');
    background-position: center -21px;
    background-repeat: no-repeat;
}

What's also interesting is that on My computer, the same code and everything looks like this:

Why is this? Thanks :)

here's one way of doing it. http://jsfiddle.net/jalbertbowdenii/pmh9f/

sprites are tricky like that. there are various other methods if that's not good enough.