Different Colored Links

Hey,

I have 2 ID's that I want the links in each to be different colors and this is what I have so far:

Freelance Web Designer

#main a:link, a:visited, a:active {
	color: #000000;
}

#main a:hover {
	color: #b80000;
}

#footer a:link, a:visited, a:active {
	color: #fff;
	text-decoration: none;
}

#footer a:hover {
	color: #b80000;
}

Code (markup):

It seems to be only taking the CSS from the footer section, any ideas?

EDIT:Ok I have just noticed that it works fine in FireFox so it is an IE7 problem.

 

Try putting the whole id name in each little section, like

#main a:link, #main a:visited, #main a:active {
	color: #000000;
}

#main a:hover {
	color: #b80000;
}

#footer a:link, #footer a:visited, #footer a:active {
	color: #fff;
	text-decoration: none;
}

#footer a:hover {
	color: #b80000;
}

Code (markup):

because otherwise, while the regular unvisited link will follow what you have for #main, the rest are assumed to be global (just a:visited, not main's a:visted) and so, the footer part of your css was the last place "a:visited" etc was listed... and then of course took precedence over what you'd typed for main (as the last thing in a css file takes precedence unless there's specificity).

Did that work?

 

Awesome, thank you!