SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    visited links are misbehaving

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You've made an error in your style sheet. For example, instead of this:

    Code:
    #sidebar a:link, a:visited {
        
    }
    you should be doing this:

    Code:
    #sidebar a:link, #sidebar 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.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

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


  5. #5
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    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).

  6. #6
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •