[vsurfer]

How in the name of CSS do I create two different styles of a:link, a:visited, a:active, a:hover.... on the same page, using styles and stylesheets ?

In other words,

I have a linked site-wide stylesheet that represents links in sans-serif families, red, bold no underline, and changes to blue with underline on hover, etc etc.

However for the main navigation links on some pages I'd like to switch from slow-loading elaborate js-rollovers to more simple css styles using backgrounds/colors with the tags a:active a:link, a:hover, a visited.

How do I get the same <a> link family tags to mean different things on the same page?

I've attempted to make them local to the TD that the NAV resides in but to no avail.

An example page that suffers from this syndrome is:

<a href="http://www.h2omen.com/htmlfiles/dastories.html" target="_blank">http://www.h2omen.com/htmlfiles/dastories.html</a>

[KaptainKaya]

</font><blockquote><font size="1" face="Geneva, Verdana, Arial, sans-serif">quote:</font><hr /><font size="1" face="Geneva, Verdana, Arial, sans-serif">
A:link {/*normal links in the text*/
color: blue;
text-decoration : none;
background: #FFFFFF;}
A:visited {
color: #FF0000;
text-decoration : none;
background: #FFFFFF;}
A:hover {
color: #999999;
text-decoration : underline;
background: #FFFFFF;}

/*now follow the section links in the navigation bar on the left side*/
A.nav:link {
color: #FFFFFF;
text-decoration : none;
font-weight: 600;
font-size:14px;
background: transparent;}
A.nav:visited {
color: #FF8C00;
text-decoration : none;
font-weight: 600;
font-size:14px;
background: transparent;}
A.nav:hover {
color: #7FFFD4;
text-decoration : none;
font-weight: 600;
font-size:14px;
background: transparent;}
A.navtot {/*the style for the actual page*/
color: #CDCDCD;
text-decoration: none;
font-weight: 600;
font-size: 14px;
background: transparent;} </font><hr /></blockquote><font size="1" face="Geneva, Verdana, Arial, sans-serif">That should help

[Millennium]

Make them local to the TD, huh?

In that case, I'd suggest a different approach from the one Kaya mentions.

Instead of giving all the links in the TD a class, give the TD itself an ID attribute. Let's sey you call it "nav". Make your links as normal.

Then, in the stylesheet, you'll have two styles for the links. Most of the links will look like:

a:link
a:visited
a:hover
a:active

However, the ones in the TD will be styled under:

#nav a:link
#nav a:visited
#nav a:hover
#nav a:active

All CSS-supporting browsers should be able to work with this technique (NS4 doesn't do a:hover, but that can't be helped, and it will get the other link types right). It also lets you just add only one ID attribute to your HTML, rather than a while bunch of class attributes, which will save you a little bandwidth in the long run.

This technique will parse a bit slower under most browsers (the age-old tradeoff of size for speed). However, unless your page is a couple of megs in size, you shouldn't even be able to notice the speed difference, which will be more than offset by the faster download times.