Anchor Tag Problem

[Tree]

In my CSS, I have

A:link { 
color: #530000; 
font-weight: bold; 
text-decoration: none; 
}

A:active { 
color: #530000; 
font-weight: bold; 
text-decoration: none; 
}

A:visited { 
color: #530000; 
font-weight: bold; 
text-decoration: none; 
}

A:hover { 
color: #9E0000; 
font-weight: bold; 
text-decoration: none; 
}

.nav A:link {text-decoration: none; }

.nav A:active {text-decoration: none; }

.nav A:visited {text-decoration: none; }

.nav A:hover { 
color: #9E0000; 
font-weight: bold; 
text-decoration: none; 
}

However, the .nav's aren't working. What do I need to do to have the .nav anchors different than the regular anchors?

 

[Shorty]

Try taking the A:link specification out, so you've just got:

.nav {text-decoration: none; }

 

[Tree]

No dice.

You can see it at http://www.vestieo.com/manage/

Login with foo2, foo2

 

[Graphixcon]

Give a main div the class nav and dont use classes in the <a href="" it should solve the problem

 

[xemiterx]

The following CSS works fine for different anchor properties:

A.nav:link {color: red; text-decoration: none; }

A.nav:visited {color: blue; text-decoration: none; }

A.nav:hover { 
color: yellow; 
font-weight: bold; 
text-decoration: none; 
}

A.nav:active {color: green; text-decoration: none; }

use: <a class="nav" href="...">...</a>

note that the order of link, visited, hover and active is important. For reference: http://www.w3schools.com/css/css_pseudo_classes.asp

 

[Tree]

I figured it out. Thanks.

 

[Dan]

A:link { 
  color: #530000; 
  font-weight: bold; 
  text-decoration: none; 
}

A:active { 
  color: #530000; 
  font-weight: bold; 
  text-decoration: none; 
}

A:visited { 
  color: #530000; 
  font-weight: bold; 
  text-decoration: none; 
}

A:hover { 
  color: #9E0000; 
  font-weight: bold; 
  text-decoration: none; 
}

You can shorten all of that to:

a:link, a:active, a:visited, a:hover {
  color: #530000; 
  font-weight: bold; 
  text-decoration: none; 
}
a:hover {
  color: #9E0000; 
}

You could make the rest a lot shorter, too.

If you are giving the link a class (<a class="class">), than you would do:
a.class:link, a.class:active, a.class:visited, a.class:hover

If you had a lot of links you wanted to do that to, you should do:
<span class="links"><a href=""></a><a href=""></a></span>
and:
.links a:link, .links a:visited, .links a:active, .links a:hover

 

[Tree]

Thanks Dan! +Rep