Anchor Tag Problem

Tree · Jun 7, 2006

In my CSS, I have

HTML:

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 · Jun 7, 2006

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

HTML:

.nav {text-decoration: none; }

Tree · Jun 7, 2006

No dice.

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

Login with foo2, foo2

Graphixcon · Jun 10, 2006

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

xemiterx · Jun 10, 2006

The following CSS works fine for different anchor properties:

PHP:

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 · Jun 10, 2006

I figured it out. Thanks.

Dan · Jun 10, 2006

Code:

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:

Code:

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 · Jun 10, 2006

Thanks Dan! +Rep

gvp.si

livingwaterministries.co.za

sweetcheeks.co.nz

eduap.academy

laperle.fr

sensyupado-plus.jp

gomovies.ru.com

juntosporextremadura.es

theshortlist.london

novant.fr

Anchor Tag Problem

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Buy my domains.VIP Member

Established Member

ROKY.com

Meet.io

E.games

Vest.io

nefrex.com

NonStop.ai

verification.net

Newly.co

neolyx.com

Saeb.com

Similar threads

We're social

ROKY.com

Meet.io

E.games

Vest.io

nefrex.com

NonStop.ai

verification.net

Newly.co

neolyx.com

Saeb.com

Pinned

Appreciation

Preference

Appreciation

Upvoting

Agreement

Answers

Decisions

Relevance

Reaction

Facial expressions

Vocal expressions

Status

Workflow

Clarification

Feeling

Sympathy