There is a current trend in web design I will call, “active state classes.” An active state describes a link in web page navigation that is a different color than the rest of the navigation signifying that the user is currently on that page or in that section of the web site.

Active states of links are created in the CSS of a site by assigning a class in CSS named “active.” You then give the class a different color than the rest of the navigation to make it stand out. Once the user navigates to that particular page, the “active” class is added to the link. So as the user navigates around the site, the current page or section is highlighted by the active class creating an active state.

Most current web designers and developers are aware of this trick. But, I was reminded of something this week while using this technique in my site design. This link state works differently across different browsers.

In styling links with CSS, there are 4 pseudo classes for each link state, link, visited, hover and active to which you can assign different styling. With Firefox on Windows and Mac, as well as Safari on Mac, you only need to specify one active class for the “link” pseudo class to make the active state work. This will not work in Internet Explorer 6. In IE 6, you need to specify the active class for all four link pseudo classes to make the active state work.

I am describing this technique here because I forgot to do this for all 4 pseudo classes. I then tried to figure out why it didn’t work in IE 6, until I looked at a previous site I had done. That is when I figured out what the problem was.

Note, I have not tested this in IE 7 yet. I am not testing my design in IE 7 yet. I only have one PC in my office, and I still have IE 6 installed on it, since it usually gives me the most trouble.

Related Posts:

• Optimizing the Title Tag and Meta Tags
• Title Tag and Meta Tags
• Is MySpace.com Really That Popular?
• Visa and Mastercard Impose Revenue Limits
• Reflection Maker

This entry was posted on Friday, January 12th, 2007 at 11:56 pm and is filed under CSS, IE, Tips. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.