Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Location
    Nashville
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a:hover and a:visted conflict

    So.... I've got a nav bar that I've got looking the way I want it. Basically it's red text on an orange background.

    on a:hover the text turns to orange while a red bg is applied.

    In order to keep the links looking consistant from page to page I've made an a:visited where the text is red again. problem is when I hover over a page that's been visited my text matches the red background instead of going orange. I'm obviously leaving something out.

    Is there a way to fix this?

    a:link { text-decoration: none; color: red; font-size: 12px; }
    a:hover { text-decoration: none; color: #FF9900; font-size: 12px; background: red; }
    a:active { text-decoration: none; color: #FF9900; font-size: 12px; background: red; }
    a:visited { text-decoration: none; color: red; font-size: 12px; }
    Last edited by macmonkey; 02-02-2005 at 09:15 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Set the background to transparent for visited.

    Edit: Don't think I understood you correctly. If you want the unvisited style and visited style to be the same just do this:

    Code:
    a:link, a:visited  { text-decoration: none; color: red; font-size: 12px; background:transparent; }
    a:hover { text-decoration: none; color: #FF9900; font-size: 12px; background: red; }
    a:active { text-decoration: none; color: #FF9900; font-size: 12px; background: red; }
    Last edited by mcdougals4all; 02-02-2005 at 09:20 PM.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    if i understand u correctly u have to give background-colors to your visited
    Code:
    a:link { text-decoration: none; color: red; font-size: 12px; }
    a:visited { text-decoration: none; color: red; font-size: 12px; background:#FF9900;}
    a:hover { text-decoration: none; color: #FF9900; font-size: 12px; background: red; }
    a:active { text-decoration: none;font-size: 12px;}
    and they go in a certain order for them to work, u can add active colors if u want i took them off so u still get the rollover effect

  • #4
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    a {
    text-decoration: none; color: red; font-size: 12px;
    }
    a:visited {
    background:#f90;
    }
    a:hover {
    color: #f90;
    }
    There you go .

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Location
    Nashville
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks..

    thanks chiliepie and everyone else... sorry for my vagueness but I'm still learning css so it's pretty vague to me too....

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by _Aerospace_Eng_
    if i understand u correctly u have to give background-colors to your visited

    and they go in a certain order for them to work, u can add active colors if u want i took them off so u still get the rollover effect
    Not quite... you don't need a background, but you're right, the order is important.

    1. link
    2. visited
    3. hover
    4. active

    P.S. i alwyz hav trubble reading ur posts

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rule of thumb

    Yeah, link pseudo-classes... it's a LoVe / HAte relationship...
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by ronaldb66
    Yeah, link pseudo-classes... it's a LoVe / HAte relationship...
    ah, that's much better than what I've been using... I said this as a joke once and it's been stuck in my head since then:

    "lewd, vicious hamster attacks"



  •  

    Posting Permissions

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