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. (http://www.usm.edu/pfta/new/index.php/pfta/chair/)

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

    This is what I have for the images:

    Code:
    /* —– ROLLOVER NAVIGATION SECONDARY PAGES */

    #side_nav li {
    list-style-type:none;
    list-style-position: outside;
    list-style-image:none;
    }

    #side_nav li a {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(http://www.usm.edu/coal/new/pfta_webgraphics/side_nav.png) no-repeat scroll 0 0;
    display:block;
    margin:0;
    height:170px;
    width:127px;}

    #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

    Code:

    I don’t see why it works on the homepage (http://www.usm.edu/pfta/new/), but it doesn’t on the other pages…

    Rob
    # 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! :)

    Rob
    # 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.

*May or may not contain any actual "CSS" or "Tricks".