CSS no-underline text

As part of a site redesign for the new year, I’m trying to incorporate a lot of new elements… including an expanded use of CSS.

The thing I’m getting hung up on is the no-underline text (I’d like to use it for a text navigation at the bottom of my page).

I’ve gone to a couple design sites and followed the instructions, but I keep having the same problem:

What I want: small blue text links with no underline that change to red when the users mouse is over the link.

What I get:small blue text links with no underline that change to red the user mouse is over the link, BUT once someone has clicked on that link it appears as purple. It will still turn red on mouseover.

This is driving me crazy. Here’s my stylesheet (not very extensive yet… part of my New Year’s resolution is to use PHP includes for headers and footers, so I’m just trying to sort out those right now). It’s the ‘a.nav’ class that is giving me fits.

Any clues on what I’m doing wrong?

you need to specify a.nav:visited and a.nav:active in your stylesheet…


I believe the link styles should be listed in this order: link, visited, active, hover.

According to CSS guru, Eric Meyer, the recommended order goes like this: link, visited, hover, active. And I think Jeffrey Zeldman has suggested a way of remembering the order, just think: love, ha!