Having trouble with sprites

URL: http://goo.gl/N6B9ba


I am having some trouble with the sprites that I’m using for the social icons in the sidebar. I cannot figure out how to get rid of the slight shift when you hover over them. If I change the background position by one pixel in either direction, the problem gets worse. What am I missing?


It may just be that the two versions of each image don’t match exactly. How did you create the sprite? I normally create one version, then duplicate it and modify the copy, so that I know the two are exactly the same (except for color etc.). I superimposed both images in Ps and they are fractionally different.

Yes, I found that too: the drawing program has made some nearly visible differences.


If you compare the circles and letters in the upper and under half, there are small differences. Some letters seem to be “half a pixel” down (by the half transparent points), but other letters not. So with css positioning 1px up or down: always wrong! :wink:

  • I’m always working with help lines in a separate layer to get it exactly the same.

You can try this one: [U]social-sprite-nw.png[/U]

Now the css can be pretty the same for all items:

.social {
    float: left;
    width: 220px;
    margin: -7px 0 0 0;
.social a,
.social a:hover {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 0 3px 0 0;
    background: url(images/social-sprite-nw.png);
.social a:hover {
    background-color: #FAF0B3;
    border-radius: 10px;
.facebook {
    background-position: 0 0;
.pinterest {
    background-position: -70px 0;
.twitter {
    background-position: -140px 0;
.facebook:hover {
    background-position: 0 -70px;
.pinterest:hover {
    background-position: -70px -70px;
.twitter:hover {
    background-position: -140px -70px;

Okay, many thanks to you both. I will go to the designer and ask her to recreate the sprite image. Thanks!