SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having trouble with sprites

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Yes, I found that too: the drawing program has made some nearly visible differences.


    enlarged


    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!
    • I'm always working with help lines in a separate layer to get it exactly the same.

    You can try this one: social-sprite-nw.png

    Now the css can be pretty the same for all items:
    Code:
    .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. #4
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, many thanks to you both. I will go to the designer and ask her to recreate the sprite image. Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •