link styles being overridden by default

[kiwidesign]

Hi all,

I am trying to have specific colours for my text links.
I amm using a css file and the styles are

a.link{
color:#F0AB00;
text-decoration:underline;
}
a.visited {
color:#0082D0;
text-decoration:underline;
}
a.active{
color:#0082D0;
text-decoration:underline;
}
a.hover{
color:#F0AB00;
text-decoration:underline;
}

this however does not seem to have any effect on the link colour at all (no matter how many refreshes i do)

The only way I can get it to change is by using
a {color:#0066CC; font-weight: bold}

however I also want a hover colour.

Any ideas what is blocking my styles from working?

[skizm]

howdy,

try this instead:

a:link{
color:#F0AB00;
text-decoration:underline;
}
a:visited {
color:#0082D0;
text-decoration:underline;
}
a:active{
color:#0082D0;
text-decoration:underline;
}
a:hover{
color:#F0AB00;
text-decoration:underline;
}

Cheers! ;)

[kiwidesign]

Thanks heaps, what a silly mistake.

[Grump]

I am having a similar problem, but I don;t think it's a typo. I can't make the link color blue (#000099) no matter what I have tried. Maybe it's a simple solution to someone.

.news a:link
{
color: #000099;
font-style: italic;
text-decoration: none;
}
.news a:visited
{
color: #D09962;
text-decoration: none;
}
.news a:hover, .news a:active
{
color: #A05000;
font-style: italic;
text-decoration: underline;
}

Thanks for any help.

Grump

[tedster]

Maybe this is just too obvious and you're way ahead of me, but have you dumped your browser cache so the link isn't registering as "visited"?

If that's not the issue, the issue may lie in the html -- something else is cascading in and changing the rule you've tried to set.

[bedlam]

Some notes:

@skizm: you were almost right, but the following code is better --

a:link {
text-decoration:underline;
color:#f0ab00;
}

a:visited,
a:active {
color:#0082d0;
}

Here's why:

It's been made shorter in several ways:

• First, by moving the 'text-decoration' property into only one pseudoclass. The others must explicitly override this property in order to change it. They don't, so it can just stay in the initial pseudoclass.

• Secondly, by removing the :hover pseudoclass altogether -- it's exactly the same as the :link state...to me this looks like an error, but if :hover is supposed to match :link, then there's no need keep the :hover state at all.

• Thirdly, by grouping the remaining pseudoclasses together since they have identical properties.
  

In addition, the pseudoclasses should always occur in the order

:link
:visited
:hover
:active

@Grump: your code can also benefit from some simplification --

.news a:link {
color:#009;
font-style:italic;
text-decoration:none;
}

.news a:visited {
color:#d09962;
}

.news a:hover,
.news a:active {
color:#a05000;
text-decoration:underline;
}

Again, the only things that change between your pseudoclasses are the color, and the text decoration on the :hover and :active states, so that's all you need to specify (you did get the order right though).

As for why your links won't turn blue, I guess one of three things (and we'll probably need a short, relevant html sample to decide for sure):

1. All the links on your test page have been visited, or

2. The links you're testing are not contained by an element with the class 'news', or

3. A specificity problem; in other words, some more specific selector (or some equally specific selector appearing later in the css or lower in the cascade) is overriding the 'color:009;' setting.
   

-b

[Grump]

Hi bedlam,

All the links on your test page have been visited...

Boy, do I feel dumb. I tested it with an address I haven't visited and the link renders just fine. Jeez.

But you also gave me hints for a cleaner CSS, thanks. I made some corrections (and added a focus attribute I just learned about). It's still not exactly like yours though:

.news a:link
{
color: #009;
font-style: italic;
text-decoration: none;
}
.news a:visited
{
color: #D09962;
}
.news a:hover, .news a:focus, .news a:active
{
color: #A05000;
text-decoration: underline;
}

My curly brackets are left aligned and it helps me read the CSS code better. Each attribute is actually tabbed once (5 spaces), but the message doesn't show that. Would I save much overhead by clustering the curly brackets as you did and eliminating the tabs?

Thanks again for your help.

Grump

[bedlam]

Would I save much overhead by clustering the curly brackets as you did and eliminating the tabs?

Nope, purely a matter of preference. Some like this...

.foo
{
/* Styles */
}

...others like this...

.foo {
/* Styles */
}

...and still others like this...

.foo { /* styles */ }

-b

[skizm]

hi bedlam,

good to see people helping people, but all I did was copy/paste his original. didn't have time to provide a detailed explanation or optimize so it's good to know theres folks out there whom have the time to provide further explanation. I'm sure many appreciate your help, keep up the good work amigo...

cheers!
-CW