[RESOLVED] Links css

[chris1990]

On my page i have a link using the css code below, everything works except once i've clicked on a link the hover no longer works on that link, is there something wrong with the :visited css code. How do i get the hover working when the page has been visited.

a.SmallTextLink:link {
	font-family: "Franklin Gothic Medium";
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	color: #6e6e6e;
	text-decoration: none;
}
a.SmallTextLink:hover {
	font-family: "Franklin Gothic Medium";
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	color: #f67929;
}
a.SmallTextLink:visited {
	font-family: "Franklin Gothic Medium";
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	color: #6e6e6e;
	text-decoration: none;
	}
a.SmallTextLink:active {
	font-family: "Franklin Gothic Medium";
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	color: #f67929;

thanks in advance

[techgnome]

flip them around..... when using the sub classes of the a link, use link first, followed by visited, then hover, then active...
Here's why.... once you visit a link, it takes on the visited styling, but CSS is processed top to bottom, so things at the bottom override styles closer to the top. So when you then hover over a link, because the Visited style is AFTER your Hover, it doesn't appear to change. If you swap them around, so that Hover is after Visited, you'll get the effect you are looking for.

there's a nmonic I learned "LoVeHAte".... for (L)ink, (V)isited, (H)over, (A)ctive" that helps to keep me in order..... I don't quite get the connection, but it works I guess.

-tg

[chris1990]

thanks

[Merri]

You could also save a good bit with the styles:

a.SmallTextLink,
a.SmallTextLink:link,
a.SmallTextLink:visited {
	font: italic normal 12px "Franklin Gothic Medium";
	color: #6e6e6e;
	text-decoration: none;
}
a.SmallTextLink:hover,
a.SmallTextLink:active {
	color: #f67929;
}

No reason to replicate tons of the same styles.