a:hover and a:visted conflict

So.... I've got a nav bar that I've got looking the way I want it. Basically it's red text on an orange background.

on a:hover the text turns to orange while a red bg is applied.

In order to keep the links looking consistant from page to page I've made an a:visited where the text is red again. problem is when I hover over a page that's been visited my text matches the red background instead of going orange. I'm obviously leaving something out.

Is there a way to fix this?

a:link { text-decoration: none; color: red; font-size: 12px; }
a:hover { text-decoration: none; color: #FF9900; font-size: 12px; background: red; }
a:active { text-decoration: none; color: #FF9900; font-size: 12px; background: red; }
a:visited { text-decoration: none; color: red; font-size: 12px; }

Set the background to transparent for visited.

Don't think I understood you correctly. If you want the unvisited style and visited style to be the same just do this:


a:link, a:visited { text-decoration: none; color: red; font-size: 12px; background:transparent; }
a:hover { text-decoration: none; color: #FF9900; font-size: 12px; background: red; }
a:active { text-decoration: none; color: #FF9900; font-size: 12px; background: red; }

if i understand u correctly u have to give background-colors to your visited
a:link { text-decoration: none; color: red; font-size: 12px; }
a:visited { text-decoration: none; color: red; font-size: 12px; background:#FF9900;}
a:hover { text-decoration: none; color: #FF9900; font-size: 12px; background: red; }
a:active { text-decoration: none;font-size: 12px;}
and they go in a certain order for them to work, u can add active colors if u want i took them off so u still get the rollover effect

a {
text-decoration: none; color: red; font-size: 12px;
}
a:visited {
background:#f90;
}
a:hover {
color: #f90;
}

There you go :) .

thanks chiliepie and everyone else... sorry for my vagueness but I'm still learning css so it's pretty vague to me too....

if i understand u correctly u have to give background-colors to your visited

and they go in a certain order for them to work, u can add active colors if u want i took them off so u still get the rollover effect
Not quite... you don't need a background, but you're right, the order is important.

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

P.S. i alwyz hav trubble reading ur posts :D

Yeah, link pseudo-classes... it's a LoVe / HAte relationship... :thumbsup:

Yeah, link pseudo-classes... it's a LoVe / HAte relationship... :thumbsup:
ah, that's much better than what I've been using... I said this as a joke once and it's been stuck in my head since then:

"lewd, vicious hamster attacks"

:eek: