Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Sprites problem on anchors

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #22584

    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?

    #47265

    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 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.