Treehouse: Grow your CSS skills. Land your dream job.

[Solved] CSS Sprites Issues

  • # March 1, 2010 at 2:03 am

    I’ve been toying around with CSS Sprites, and have it working just like I want on my homepage.

    On my secondary page, however, I’m using the same concept, but the images will not line up like they should. (

    Can anyone take a quick look at my css and help out?

    This is what I have for the images:


    #side_nav li {
    list-style-position: outside;

    #side_nav li a {
    background:transparent url( no-repeat scroll 0 0;

    #side_nav li a.item1 { background-position: 0 0; }
    #side_nav li a:hover.item1:hover { background-position: 0 -137px; }

    #side_nav li a.item2 { background-position: 0 -274px; }
    #side_nav li a:hover.item2:hover { background-position: 0 -411px; }

    #side_nav li a.item3 { background-position: 0 -548px; }
    #side_nav li a:hover.item3:hover { background-position: 0 -685px; }

    #side_nav li a.item4 { background-position: 0 -822px; }
    #side_nav li a:hover.item4:hover { background-position: 0 -959px; }

    And here’s my HTML


    I don’t see why it works on the homepage (, but it doesn’t on the other pages…

    # March 1, 2010 at 5:12 am

    as far as I can see on that page its because your <a> has its height and width mixed up :) – Change the Height to 127px and the width to 170px and it will be fine :)

    Or if you want the white area as a separator you can make the height 137px :)

    # March 1, 2010 at 5:04 pm

    WOW! I feel like a complete moron…

    Thank you so much! I have looked and tried different things…. but never thought to look at the height/width.

    THANK YOU! :)

    # March 1, 2010 at 5:45 pm

    hehe no probs – its always the simple things that you loose the most time over :) Code blindness lol

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.