...

View Full Version : Unwanted link color attribute inheritance



cjwsb
07-16-2005, 09:03 PM
Hi all,

I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited.

The test page is here (http://www.bartlett-family.net/chrisbartlett/)

You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text.

Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color.

BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited.

Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this?

CSS file is here (http://www.bartlett-family.net/chrisbartlett/main.css)

Thanks!

Chris

_Aerospace_Eng_
07-16-2005, 09:09 PM
Where exactly are your rollovers? I don't see them on that test page.

cjwsb
07-16-2005, 09:18 PM
On the black horizontal line right below the logo. The four links are there. Problem is, since you've probably been to this page before (you've helped before), the HOME link won't display because it's black, just like the bar. That's what I do not want inherited. Move your mouse to the left of timeline & Bio, and I'll bet you'll hit a "blind" link.

Chris

_Aerospace_Eng_
07-16-2005, 09:34 PM
Okay, the problem is an error in your part. Nothing major just a simple mistake.

#ln1 li a {
background : url(./pix/home_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}

#ln1 li a:hover {
background : url(./pix/home_mouse.gif) no-repeat;
}


#ln1 li a:visited {
background : url(./pix/home_click.gif) no-repeat;
}
You are trying to style a link that is in an li, in which the li is in an element that has an id of "ln1" however this is not possible with your current setup since the LI IS #ln1 so change the above CSS to this

#ln1 a {
background : url(./pix/home_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln1 a:visited {
background : url(./pix/home_click.gif) no-repeat;
}
#ln1 a:hover {
background : url(./pix/home_mouse.gif) no-repeat;
}
And to ensure compatability, link pseudo classes go in a certain order:

a:link
a:visited
a:hover
a:active

cjwsb
07-17-2005, 03:24 AM
Thanks, mate. That was the ticket!

Chris



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum