Grow your CSS skills. Land your dream job.

CSS Sprites problem on anchors

  • # May 1, 2008 at 10:03 pm

    I pride, and make fun of myself, for pushing Sprites to the limit. I’ve had a 100k image with about 15 images in it trying to make that work. that gets tricky haha.

    anyway.

    for navigation i put all the normal states on the top in a row across and the hover states lined up directly below them.
    so for the code below for example i have 8 images in 1 image.

    I’ve used this code for navigations about 5 times now:

    Code:
    #header ul {
    position:absolute;
    bottom:26px;
    left:0px;
    width:960px;
    margin:0;
    padding:0;
    list-style:none;}
    #header ul li {
    float:left;
    margin-right:5px;}
    #header ul li a {
    display:block;
    height:57px;
    background:url(images/navigation.png) no-repeat;
    text-indent:-9999px;}

    li#blog {width:80px; background-position:left top;}
    li#blog a:hover {background-position:left bottom;}

    li#work a {width:95px; background-position:-90px top;}
    li#work a:hover {background-position:-90px bottom;}

    li#about a {width:83px; background-position:-205px top;}
    li#about a:hover {background-position:-205px bottom;}

    li#contact a {width:119px; background-position:-310px top;}
    li#contact a:hover {background-position:-310px bottom;}

    works awesome but i do have one problem.

    If i give the list items the ID, then the background positioning doesn’t work at all for the down state anchors.
    it DOES work when you hover though. drives me crazy!

    to make this work i actually have to change the mark up to mirror this:

    Code:
    li a#work {width:95px; background-position:-90px top;}
    li a#work:hover {background-position:-90px bottom;}

    which I suppose is fine. but not what i want.

    just seems stupid to me that the positioning would work for the down state if it works for the hover if the ID is on the li, not the anchor.

    anybody have any clue why this happens and how i can fix it?

    # May 3, 2008 at 11:58 am

    Seems like there is more to the story, maybe a syntax problem somewhere or something that I am not seeing. Otherwise, is there any reason you are opposed to having ID’s on the anchors themselves? Seems fine to me, and if it works, it works.

    # May 4, 2008 at 12:50 am

    I forget which site it was that i needed the ID’s on the li but i cant remember why or how it worked.

    you’re right, if it works it works,

    i just think its odd that it’s behaving that way.

    wondered if anybody knew the technical reason behind it

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

You must be logged in to reply to this topic.

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