Visited links are misbehaving

jellevant 2011-07-06 23:29:31 UTC #1

I've been building sites forever and have not had this happen before.

The site was done and looked great in dreamweaver and when I tested it at first. Then I noticed my 'visited' links were misbehaving - on all browsers in both pcs and macs.

I have two sets of a links, one for the side bar navigation and one for the main content. At first all the main content links (supposed to be orange for a:link and a:visited and green for a:hover and a:active) were taking on the body text color (brown) after being visited. Couldn't figure out why so I created a new class called "orange" and tagged all the main content with links as class="orange". A bit of work but it seemed fine and I thought I was done - again.

Then I realized that now all my navigation links on the sidebars (class="nav" and "sublist") are picking up the orange when they're supposed to be brown with white on hover. So, I actually removed the basic a links in the style sheet so that only div and class links are included. I've added reduntancies to the hilt, e.g. #sidebar a:link, #sidebar .nav a:link, etc - all the same brown hovering to white -- and they still turn and stay orange once clicked. I can't figure out how they even get to orange! I'm tearing my hair - and I don't have a lot of it - and have spent all day on this, so if you can look and find a hopefully really stupid thing I missed, I'd me more than grateful.

The site (still under development thank goodness) is drronaldlevant.com/new.
The style sheet is rlevant.css.

ralphm 2011-07-07 00:35:51 UTC #2

You've made an error in your style sheet. For example, instead of this:

#sidebar a:link, a:visited {
    
}

you should be doing this:

#sidebar a:link, <font color='"Red"'>#sidebar</font> a:visited {
    
}

Each of those selectors (separated by a comma) is completely separate from the others. There's no carry-over from one to another, so #sidebar has to be repeated each time.

The same applies to the other link styles.

dresden_phoenix 2011-07-07 00:47:48 UTC #3

Many folks will here will tell you DreamWeaver is no good. I will just say that DW previews are no good. When testing a site test it in actual browsers, in fact a site could look good in Firefox and not in IE... Test in EACH BROWSER and preferably as you make each change ( it helps you pin point exactly when something goes wrong.. and saves a LOT OF TIME) ,

of the top of my head I'd say you are experiencing a specificity issue.

looking at your code am a bit confused, but for what I can interpret from your question you took an invalid shortcut... lol
( in all your links so you are nothing if not consistent)

example:

sidebar a:hover, a:active {...}

which really says (for hovered links inside #sidebar AND all active links everywhere)
but I think you meant

sidebar a:hover, #sidebar a:active {...}

which says (for hovered links inside #sidebar AND all active links inside sidebar)
you have to write the whole rule each time after the coma.

additionally I foresee a problem with specificity
IDs are more specific than Classes which, in turn, are more specific than tags.

so if you have: .nav a:hover { color: pink;} and #sidebar a:hover{color:lime;} and the following code:

your link will turn lime when hovered and not pink as you may have expected. What you need to do in that case ( aside from maybe rethinking your hierarchy is:

sidebar .nav a:hover{}, thus making one rule target all a's in .nav everywhere and another for a in .nav's specifically in the #sidebar

I hope that helps you understand your unruly links.

jellevant 2011-07-07 01:00:18 UTC #4

Thank you both. You're right I was taking shortcuts - but without knowing it. I think it's almost there now.

jellevant 2011-07-07 01:07:21 UTC #5

Well, I should say it's presentable - but now the hover & active aren't changing. I dumped one of the selectors, so there's just .nav and .sublist with the same link attributes. Maybe I don't need both, but the hover still should be working in one of them, yes? (menu items should turn white on hover).

jellevant 2011-07-07 01:22:49 UTC #6

Perfect now. Don't quite know what I did but I fixed it. Again, thanks to both of you for heading me down the right path!

system 2014-10-08 01:15:35 UTC #7

ThemesPodcastArticlesPremium