WebMonkey Beta 2.0: The Web Developer's Resource

Help|
Rss feeds
- Rss feeds
- Subscribe to:
- Tutorials
- Reference
- Code library
- All articles
- Monkey Bites Blog

Member Sign In

Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.

It's fast and free.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Join Webmonkey

E-mail address:

Username:

Password:

Confirm password:

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.

Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.

Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

Webmonkey is a property of Wired Digital.

processing...

Welcome to Webmonkey

A private profile page has been created for you.

As a member of Webmonkey, you can now:

edit articles
add to the code library
design and write a tutorial
comment on any Webmonkey article

Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.

If you cannot find it in your in-box, please check your bulk or junk folders.

Webmonkey is a property of Wired Digital.

Control Visited Link Colors With CSS

/skill level/

/viewed/

0 Times

Here's a nice little trick if you ever need more than one visited link color on a given Web page (here's an example). Let's say most of your links are blue, but your navigation links are white on a gray background. That's easy. The hard part is making your visited link colors different.

Why is it tricky? Because you need cascading stylesheets (CSS) to do it, and browser support for CSS is, shall we say, less than stellar.

Here's how it should work:

 <STYLE TYPE="text/css">
 <!--
 A.nav:link { color:#FFFFFF }
 A.nav:visited { color:#CCCCCC }
 //-->
 </STYLE>

The above code (which is tucked away in the <HEAD> of the HTML) establishes a stylesheet that defines a nav class with two "pseudoclasses." For all <A> tags with CLASS="nav", unvisited links will be white and visited links will be light gray.

Here's how it should work in the HTML of the page:

 
<A HREF="unvisited.html" CLASS="nav">
 <FONT COLOR="#FFFFFF" FACE="Verdana" SIZE="2">
 unvisited link
 </FONT></A>

<A HREF="01.html" CLASS="nav">
 <FONT COLOR="#FFFFFF" FACE="Verdana" SIZE="2">
 visited link
 </FONT></A>

Note:We have to include <FONT COLOR="#FFFFFF"> for each link, because otherwise browsers that don't recognize stylesheets will display the links as the default color.

So does this code work? Find out.

You probably just got some bad news. That's because our favorite (I use the word loosely) browsers, Communicator and Internet Explorer, don't give the CSS code priority as they are supposed to. Instead, <FONT COLOR="#FFFFFF"> overrides the CSS code, and the light gray visited link color doesn't show up. Sniff.

OK, I won't tease you. Let's look at the code that does work.

Making It Work

Here's the full code for making multiple visited link colors work (remember that this goes in the <HEAD> of the HTML):

 <STYLE TYPE="text/css">
 <!--
 A.nav:link { color:#FFFFFF }
 A.nav:visited { color:#CCCCCC }
 //-->
 </STYLE>

<SCRIPT LANGUAGE="JavaScript">
 <!--
 if (parseInt(navigator.appVersion) < 4 && navigator.appName == "Microsoft Internet Explorer") {
 document.write ("<STYLE> .nav { color:#FFFFFF } </STYLE>"); }
 //-->
 </SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
 <!--
 if (parseInt(navigator.appVersion) < 4 || (navigator.appName != "Netscape" && navigator.appName != "Microsoft Internet Explorer")) {
 vlink = "<FONT COLOR=#FFFFFF>"; }
 else
 vlink = "";
 //-->
 </SCRIPT>

Then add this to the <BODY> of the page:

 <A HREF="unvisited.html" CLASS="nav"><FONT FACE="Verdana" SIZE="2"><SCRIPT LANGUAGE="JavaScript">
 <!--
 document.write(vlink);
 //-->
 </SCRIPT>
 <NOSCRIPT>
 <FONT COLOR="#FFFFFF">
 </NOSCRIPT>
 unvisited link
 </FONT></A>

<A HREF="01.html" CLASS="nav"><FONT FACE="Verdana" SIZE="2"><SCRIPT LANGUAGE="JavaScript">
 <!--
 document.write(vlink);
 //-->
 </SCRIPT>
 <NOSCRIPT>
 <FONT COLOR="#FFFFFF">
 </NOSCRIPT>
 visited link
 </FONT></A>

[/webmonkey/99/28/stuff0a/test2.html See the code in action].

Keep in mind that, because this solution uses CSS, only 4.0+ browsers will support it. Other browsers should see white links.

Behind the Scenes

For those who care, here's how it works. The initial <STYLE> block defines the unvisited and visited link colors (white and light gray, respectively).

The first JavaScript is a work-around for an Internet Explorer 3.x bug (PC only). This script guarantees that links in IE 3 will be white and not the default color. You should know, however, that if scripting is turned off in IE 3, your links will be the default color.

The second JavaScript defines a variable called vlink. For any browser except Netscape or IE 4.0+ (in other words, any browser that doesn't support multiple visited link colors), use this:vlink = "<FONT COLOR=#FFFFFF>". Otherwise, vlink will be empty.

In the <BODY> of the page, the code for each link must be in this order:

The <A> with CLASS="nav". This sets the link colors.
An optional <FONT> tag for setting typeface and size. Don't define a color here!
The beginning of the <SCRIPT>. Important: If your link is within an HTML table, these first three bits of code must be on the same line as the <TD> that opens that particular table cell. Otherwise, you may get odd behavior in Navigator 3.x.
The document.write that inserts the value of vlink. For browsers that don't support multiple visited link colors, <FONT COLOR=#FFFFFF> is added to ensure white links. This approach is necessary because of the browser bugs we noted on the previous page. If we inserted <FONT COLOR=#FFFFFF> for Communicator 4.0+ and IE 4.0+, they would treat the HTML as more important than the CSS, and thus, we'd never see the CSS-defined visited link color. Silly, isn't it?
The end of the <SCRIPT>.
A <NOSCRIPT> for all browsers that either don't support JavaScript or have it turned off. <FONT COLOR=#FFFFFF> ensures that the links are white.
The actual link text.
The closing </FONT> and </A> tags.

I know, I know. It's absurd that it takes this much code to accomplish something so simple. But there it is.

Visited link colors are a good thing. They help users understand where they've already been, and they make navigation easier. And now you have a slightly larger palette to work with.

Retrieved from "http://www.webmonkey.com/tutorial/Control_Visited_Link_Colors_With_CSS"