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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2003
    Location
    The wild blue yonder
    Posts
    283
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unwanted link color attribute inheritance

    Hi all,

    I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited.

    The test page is here

    You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text.

    Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color.

    BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited.

    Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this?

    CSS file is here

    Thanks!

    Chris

  • #2
    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
    Where exactly are your rollovers? I don't see them on that test page.

  • #3
    Regular Coder
    Join Date
    Oct 2003
    Location
    The wild blue yonder
    Posts
    283
    Thanks
    0
    Thanked 0 Times in 0 Posts
    On the black horizontal line right below the logo. The four links are there. Problem is, since you've probably been to this page before (you've helped before), the HOME link won't display because it's black, just like the bar. That's what I do not want inherited. Move your mouse to the left of timeline & Bio, and I'll bet you'll hit a "blind" link.

    Chris

  • #4
    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
    Okay, the problem is an error in your part. Nothing major just a simple mistake.
    Code:
    #ln1 li a {
    	background : url(./pix/home_off.gif) no-repeat;
    	font : bold 0.9em Arial, Helvetica, sans-serif;
    	text-decoration : none;
    	display : block;
    	line-height : 26px; /* trick provided by trx */
    	height : 26px;
    	color : #B04F4F;
    }
    
    #ln1 li a:hover {
    	background : url(./pix/home_mouse.gif) no-repeat;
    }
    
    
    #ln1 li a:visited {
    	background : url(./pix/home_click.gif) no-repeat;
    }
    You are trying to style a link that is in an li, in which the li is in an element that has an id of "ln1" however this is not possible with your current setup since the LI IS #ln1 so change the above CSS to this
    Code:
    #ln1 a {
    	background : url(./pix/home_off.gif) no-repeat;
    	font : bold 0.9em Arial, Helvetica, sans-serif;
    	text-decoration : none;
    	display : block;
    	line-height : 26px; /* trick provided by trx */
    	height : 26px;
    	color : #B04F4F;
    }
    #ln1 a:visited {
    	background : url(./pix/home_click.gif) no-repeat;
    }
    #ln1 a:hover {
    	background : url(./pix/home_mouse.gif) no-repeat;
    }
    And to ensure compatability, link pseudo classes go in a certain order:
    1. a:link
    2. a:visited
    3. a:hover
    4. a:active

  • #5
    Regular Coder
    Join Date
    Oct 2003
    Location
    The wild blue yonder
    Posts
    283
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, mate. That was the ticket!

    Chris


  •  

    Posting Permissions

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