Using multiple CSS links simultaneously

[chuckdesign]

I am working on a site that needs to have two simultaneous treatments for its rollovers. In my CSS file, I've created two sets of link styles. See:

http://home.comcast.net/~djfer/hwa_testing/hwa_website/index-test.html

and my CSS file:

http://home.comcast.net/~djfer/hwa_testing/hwa_website/hwa-test.css

The top row of links (starting with "Firm") is supposed to simply change color on rollover; the second row of links (starting with "Institutional") should have a colored background box appear in the hover and active states. It tests OK in IE 6 and Netscape 8 (PC) and Safari 2 (Mac). But in IE 5 (Mac), the background boxes do not show up except for visited links.

Normally I wouldn't stress over just the IE 5 (Mac) audience, but my client needs it to work in all browsers. Any suggestions will be appreciated!

Thanks.

 

[Vragabond]

Quite frankly, your script does not work on my Mozilla either. Pseudo classes need to be applied in a correct order to work properly. As you have them right now for the navbar, the :link overrides the :hover and :active states. Since you did not specify :visited, it works when visited. Switch up the styles and it will work.

:link
:visited
:hover
:active

Or LoVe HAte.

 

[chuckdesign]

Thanks, Vragabond! I changed the order of the pseudo classes in the CSS file to what you suggested, and now it works beautifully in IE 5 (Mac) and in Firefox (Mac). That was a big help! :-D

Chuck


-- Chuckdesign