Grow your CSS skills. Land your dream job.

CSS Sprite Troubleshooting

  • # November 16, 2009 at 10:28 am

    New to this forum, but have found this site very helpful in understanding new concepts. CSS Sprites is one of those concepts that is new to me, hopefully you can help me with my issue. I am currently using a Definition List to set up a right navigation. (I can’t list the website as it is currently on private development server.) The problem(s) I am running into is that I can’t seem to get a different image to load for <dt> and I can’t seem to hide the text that appears for visited links. Here is my code, hopefully someone can shed some light on why I am having this problem.
    CSS

    Code:
    #RightNav {
    margin:0px;
    padding:0px;
    position:relative;
    width: 134px;
    }
    #RightNav dl {
    position: relative;
    padding: 0px;
    margin: 0px;
    }
    #RightNav dl dt {
    list-style: none;
    background-image: url(css/images/categoryspri.png);
    background-repeat: no-repeat;
    height: 24px;
    }

    #RightNav dl dt a#tweet { background-position:0px 0px; width:134px}
    #RightNav dl dt a#blog { background-position:0 -24px; width:134px}
    #RightNav dl dt a#face { background-position:0px -48px; width:134px }
    #RightNav dl dt a#youtube { background-position:0px -72px; width:134px
    }

    #RightNav dl dd a {
    display: block;
    overflow: hidden;
    height: 28px;
    text-indent: -9999px;
    background-image: url(css/images/rightnavspr.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    text-decoration: none;
    list-style: none;
    margin-left: -40px;
    }
    a:visited { text-decoration:none;}

    #RightNav dl dd a#news {background-position:0px 0px; width:132px}
    #RightNav dl dd a#Govt { background-position:0px -28px; width:132px}
    #RightNav dl dd a#Medic { background-position:0px -56px; width:132px}
    #RightNav dl dd a#Sci { background-position:0px -84px; width:132px}
    #RightNav dl dd a#cut { background-position:0px -112px; width:132px}
    #RightNav dl dd a#cherry { background-position:0px -140px; width:132px}
    #RightNav dl dd a#facebook { background-position:0px -168px; width:132px}
    #RightNav dl dd a#tube { background-position:0px -196px; width:132px
    }
    #RightNav dl dd a#news:hover { background-position:0px -223px; width:132px}
    #RightNav dl dd a#Govt:hover { background-position:0px -251px; width:132px }
    #RightNav dl dd a#Medic:hover { background-position:0px -278px; width:132px }
    #RightNav dl dd a#Sci:hover { background-position:0px -307px; width:132px}
    #RightNav dl dd a#cut:hover { background-position:0px -333px; width:132px }
    #RightNav dl dd a#cherry:hover { background-position:0px -360px; width:132px}
    #RightNav dl dd a#facebook:hover { background-position:0px -389px; width:132px}
    #RightNav dl dd a#tube:hover { background-position:0px -417px; width:132px
    }

    #RightNav dl dd a#news:active { background-position:0px -447px; width:132px}
    #RightNav dl dd a#Govt:active { background-position:0px -475px; width:132px}
    #RightNav dl dd a#Medic:active { background-position:0px -503px; width:132px }
    #RightNav dl dd a#Sci:active { background-position:0px -531px; width:132px}
    #RightNav dl dd a#cut:active { background-position:0px -559px; width:132px}
    #RightNav dl dd a#cherry:active { background-position:0px -586px; width:132px}
    #RightNav dl dd a#facebook:active { background-position:0px -615px; width:132px}
    #RightNav dl dd a#tube:active { background-position:0px -643px; width:132px}

    HTML

    I just need to know how to remove visited links and add a different image for Definition Term.

    # November 16, 2009 at 2:05 pm

    Fixed part of the problem

    Since I wasn’t using an anchor for the definition term, I just changed it
    from

    Code:
    #RightNav dl dt a#tweet { background-position:0px 0px; width:134px}

    to

    Code:
    #RightNav dl dt#tweet { background-position:0px 0px; width:134px}

    still can’t figure out why when you click on a link, the link text shows. Its almost as the text-indent is being ignored.

    # November 16, 2009 at 4:20 pm

    just wondering if anybody knows why the link text would be appearing after a the link has been clicked? Is it because I don’t have an active state for my link, do I need to define a:visited {text-decoration: none;}

    not sure what to do, any help would be appreciated. I really want to figure this out. Kind of crazy if you ask me.

    # November 16, 2009 at 11:56 pm

    Honestly, I’m a little lost as to exactly what’s wrong.

    One question: have you tried a:hover#news instead of a#news:hover I can’t remember

    What browsers are you checking this on?

    So the problem is that when you click on a link, the text-indent stops being -9999px? when it should just change background position?

    # November 17, 2009 at 8:38 am

    yes the problem is when I click on a link, the text in the link is displayed on click as well as visited. I have tested this is in firefox, ie7, ie8, safari and opera

    # November 17, 2009 at 10:45 am

    Well, I ended up getting it to work. the only way I was able to get it to work was to designate a font size attribute of 0px;

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

You must be logged in to reply to this topic.

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