A tag problem

[blakeformayor]

Hello.. I'm new at this CSS thing and having trouble displaying my links the way I want to. I want the links to look just like the body text until hovered over, at which point I want the color to change and an underline to appear. Dreamweaver has gotten me to this point without a problem, but the issue arrives when dealing with visited links. I want visited links to look just like the unvisited links, but instead the visited links are following the settings for visited links even when I hover on them. When I tried just eliminating the settings for visited links, they reverted back to the default for vlink, that dark purple underlined, and still didn't follow the style for hover on subsequent clicks.

Here is the embedded style I'm using:

<!--
a:hover {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline}
a:link {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none}
a:active {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline}
a:visited {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none}
body {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF}
-->

You can also view a simplified html version of my problem at http://www.blakeformayor.com/blahblah.html.

I know there's got to be a very simple solution to this problem, as I've seen this done on about 4 million web pages. Thanks in advance for your help.

Blake

[Aes]

Not positive, but you're missing a final ; on every line of the stylesheet. Try this:

<!--
a:hover {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline; }
a:link {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none; }
a:active {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline; }
a:visited {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none; }
body {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; }
-->

This could conceivably cause problems in browsers! Other than that, your CSS looks fine.

-Colin

[mattjacob]

The order for link pseudo-classes is link, visited, hover, active (LVHA). Try this:

a:link, a:visited {
    background-color: transparent;
    color: #ff00ff;
    text-decoration: none;
}

a:hover, a:active {
    background-color: transparent;
    color: #66ff99;
    text-decoration: underline;
}

body {
    background-color: #ffffff;
    color: #ff00ff;
    font-family: Helvetica, sans-serif, "Arial Black";
    font-size: 10px;
}

[slider]

Aye, the order you list them in in your style sheet gives them precedence over one another.

[blakeformayor]

Ah... I see.

Thanks so much for the advice, it works just the way I want it to now!

Blake