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.
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.
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:
<div id=“sidebar”><ul class=“nav”<li><a href=“#”>Hi am a link</a></li></ul></div>
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.
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).
