Having trouble with sprites

HTML & CSS
1

URL: http://goo.gl/N6B9ba

Hello!

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?

Thanks!
Susan

2

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.

3

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

[CENTER]
enlarged[/CENTER]

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

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