Unwanted link color attribute inheritance

[cjwsb]

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

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

Thanks!

Chris

[_Aerospace_Eng_]

Where exactly are your rollovers? I don't see them on that test page.

[cjwsb]

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_]

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:

1. a:link
2. a:visited
3. a:hover
4. a:active

[cjwsb]

Thanks, mate. That was the ticket!

Chris