links and link colors

how NN and IE handle link colors

page 1 of 1

page 1
• default link colors
• rollover without a script in IE
• mixing with pictures

default link colors

NN4.7, NN6.0 and IE5.0 display link colors differently. There are three basic default link states; visited, unvisited, and active. An active link is one that has been chosen by the user. In CSS, these three states can be reached and formatted, along with other states like hover. For more on the link states available with CSS, see Things NN Won't Do - Page 7: The Pseudo-Classes.

Let's look at three links, each in a different state; visited, unvisited, and active.

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:	.

NN4.7 colors the active link red. It remains red only as long as the user holds the mouse button down. IE5.0 creates a dotted line box around the active link. This link will hold its active state until another element is clicked.

Also notice that NN4.7 colors visited links purple, where IE colors them an olive green.

rollover without a script in IE

Image rollovers are popular on the web. You can have a simple kind of rollover, one that uses a HOVER pseudo-class, that mimics an image rollover.

Create a box around your link and color the background of the box. Set the HOVER pseudo-class to whatever color you want. Normally, with the link's HOVER set, only the background directly behind the link text will change color on mouse hover. But, by defining a box with the A element's style, you can get the background of the entire box to change color. This is much like an image rollover that uses swapped gifs and JavaScript to change the background of a link. This will not work in NN6.0

Here are the style elements for the rollover:

a:hover{background:orange}


.rollover {background:#FFFFFF;
border-color:#FFD700;
border-width:1px;
border-style:outset;
width:45%;margin-bottom:2px;}

Now, call the style in the link element on your page

<a class="rollover" href="somewhere.htm">my link</a>

You'll get a rollover kind of hover color. Look at the comparison between a simple hover color and one using a boxed in link.

simple hover color:	boxed in link:

I have found that you must set the box by means of the A element, and not a DIV or P element. If you use a simple box made with a DIV or P element, only the area directly behind the link text will change color on mouse hover. This example will change the entire background, making it look as if you are swapping gifs of buttons.

mixing with pictures

You can take the above one step further by stretching the box defined in the anchor element's style across a picture that's much smaller than the defined box. This will give you a gif inside of a colored box. The color of the box will change on mouse hover. By playing with the colors of the picture (for instance, making the border area of the gif the same color as the rollover color) you can get some interesting effects with very little bandwidth use.

See more about this technique in the section on borders.