CSS Sprite Troubleshooting

[michaelcory]

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

Code:

Newsroom

Government Affiars

Medicine

Science and Tech

Cutting Edge

TArts

Facebook

Watch us on You Tube

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

[michaelcory]

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.

[michaelcory]

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.

[AshtonSanders]

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?

[michaelcory]

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

[michaelcory]

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;

[Author]

Posts