Link / Hover / Visited Rollover Text

Sometimes they work... sometimes they don't...

[eugenebarnes]

I'm having some difficulty wrapping my head around the reasons why my a:link, a:hover and a:visited styles don't work predictably.

I design my sites on a Mac using Dreamweaver, but I always test using Windows browsers. On the Mac side of things, I find my rollover text to be very unpredictable. Sometimes it works. Sometimes it doesn't. I thought for awhile that the problem was isolated to links with custom classes attached, but experimentation shows this isn't always the case.

Things are a bit more predictable under Windows with MSIE 5.5, but I still have problems getting a hover color to show on a link that has been visited. Am I wrong here, or isn't the hover color supposed to show on a mouseover even if the link is visited?

I'm hoping someone here has some helpful tips up their sleeve as I haven't had much luck finding info searching the forum archives.

TIA,

[lorax]

Without seeing the style sheet I'd like to know if the mouse-over problem is consistent. What I mean is if one link mouse-over works - does it work all the time or only sometimes. My guess is that it works all of the time if it works at all. Likewise, those that don't work correctly, don't work at all.

Which leads me to hazard a guess that you have a cascading issue. You'll need to root through your CSS to determine what styles above the A element are in the driver's seat.

If the problem is inconsistent then I have no idea what the problem might be other than typos within your code (calling a style by class when it's defined as an ID).

[eugenebarnes]

I'm having difficulty detecting a consistency in behavior which puzzles me.

Here is the CSS style sheet of a troublesome site I'm working on now:

h1 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 18px; font-weight: bold; color: #000000}
p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #000000}
.p-expanded { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; color: #000000}
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 14px; font-weight: bold; color: #000000}
ul { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #000000; list-style-position: outside; list-style-type: square}
a:hover { color: #993300; text-decoration: none; font-family: Arial, Helvetica, sans-serif}
a:link { color: #1F1BAA; text-decoration: underline; font-family: Arial, Helvetica, sans-serif}
.smalltext { font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 12px; font-weight: normal}
h3 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; font-weight: bold}
.h3-table { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; font-weight: bold; color: #000000}
a:visited { color: #1F1BAA; text-decoration: underline}

It is all generated by Dreamweaver 4. Maybe I should seriously consider upgrading to MX soon...

[Nick_W]

They're just in the wrong order. Here is a good explanation of Link Specificity [meyerweb.com] by Eric Meyer. That will show you why it's not working and how to do it ;)

Nick

[lorax]

Ah Nick, glad you came to my rescue. ;)

[eugenebarnes]

That did the trick! I knew someone would have the answer here. :)

Thanks all!