link styles legal or illegal

[tshad]

This is a continuation of a previous post where we talked about precedence
of link styles.

I understand how they work. I am just trying to find if they are legal or
are they going to cause me trouble with older browsers.

Some of my pages were done by someone else who set up their styles to work
like so:

This would turn the links white if they had the links set to something like:

<a href="#" class="toplink>test</a>

..toplink{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}


This was fine. But I wanted to set up my default links to be teal in color,
so I did the following:

a:visited {
color:#3EA2BC;
text-decoration: none;
}
a:link {
color:#3EA2BC;
text-decoration: none;
}
a:active {
color:#3EA2BC;
text-decoration: none;
}

This works fine for all my links, but it also overrode the old definition
for the links that were supposed to be white (.toplink) and now they were
all Teal.

So what I did was add another class:

a:visited.toplink{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}
a:link.toplink{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}
a:link.toplink{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}

This seems to work fine. But DW gives me a styles error that says that
there is an error parsing for IE 5.0.

Is the above definition not the preferred way to handle links?

I was told it was.

Thanks,

Tom

 

[boclair]

So what I did was add another class:

a:visited.toplink{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}
a:link.toplink{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}
a:link.toplink{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}

This seems to work fine. But DW gives me a styles error that says that
there is an error parsing for IE 5.0.

Syntax ??
a.toplink {}
a.toplink:visited{}
a.toplink:hover{}
eg
Louise

 

[Mark Parnell]

.toplink{
color: #FFFFFF;
}

a:link {
color:#3EA2BC;
}

This works fine for all my links, but it also overrode the old definition
for the links that were supposed to be white (.toplink) and now they were
all Teal.

Correct. See http://www.w3.org/TR/CSS2/cascade.html#cascading-order and
following, especially
http://www.w3.org/TR/CSS2/cascade.html#specificity.

a:link.toplink{
color: #FFFFFF;
}

This seems to work fine. But DW gives me a styles error that says that
there is an error parsing for IE 5.0.

It's probably right - IE5 is very broken.

Is the above definition not the preferred way to handle links?

According to the specs it is. As boclair suggested, switch the class and
pseudo-class around and see whether IE5 likes it better (I can't
remember off the top of my head). Technically either is valid, but we
must humour IE.