#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    4
    Rep Power
    0

    Visited link does not change color


    I cannot get a visited link to change color. The hover, unvisited, and active links all work fine, but the visited links do not change. I have tried moving the css definitions around, even deleting all but the visited link, but nothing helps. Can anyone find my error in the following?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
    <title>test link image to image</title>
    
    <style type="text/css">
    .auto-style1         {border:thick lime ridge;}
    .auto-style1:link    {border:thick lime ridge;}
    .auto-style1:visited {border:thick pink ridge;}
    .auto-style1:hover   {border:thick gold ridge;}
    .auto-style1:active  {border:thick silver ridge;}
    </style>
    </head>
    
    <body>
    <h2> test link image to image </h2>
    <p>
    <a href="../pictures/candle.png">
    <img alt="candle" class="auto-style1" height="80" src="../thumbs/candle.jpg" 
    width="80" /></a>
    </p>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    I wasn't aware that you could put those selectors on anything other than an <a> tag. I don't think it's even supposed to work with how you have it setup.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    4
    Rep Power
    0
    Originally Posted by slime
    I wasn't aware that you could put those selectors on anything other than an <a> tag. I don't think it's even supposed to work with how you have it setup.
    If I move the 'class="auto-style1"' statement to the <a> tag, it generates little boxes at the bottom of the image, in the correct colors, but with only 3 sides of the boxes visible because the box is smaller than the image. looks something like this:
    Code:
     
    .-----.
    !     !
    !     !  <--image
    '-----'
    [_____]   <--small colored box under image
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    When you say small box appearing below, you are talking about the border itself right?

    But try adding this:

    Code:
    .auto-style1 {
        width: auto or 80px;
        height: auto;
        padding: 0;
        display: inline-block; }
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Location
    Burb of Detroit, Michigan
    Posts
    89
    Rep Power
    77
    The class auto-style1 should go in the (a)nchor tag.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
    <title>test link image to image</title>
    <style>
    .auto-style1 {
    	display: inline-block; /* block works just as well for the anchor tag I believe is a block element? */
    	width: 80px;
    	height: 80px;
    	padding: 0;
    	margin: 0;
    	border: 3px solid;
    }
    .auto-style1:link    {border-color: green;}
    .auto-style1:visited {border-color: blue;}
    .auto-style1:hover   {border-color: red;}
    .auto-style1:active  {border-color: yellow;} 
    </style>
    </head>
    
    <body>
    <h2> test link image to image </h2>
    <div > 
    <a class="auto-style1" href=" http://placehold.it/350x150"><img alt="candle" src=" http://placehold.it/80x80" /></a> 
    </div>
    </body>
    </html>
    Last edited by Strider64; January 25th, 2014 at 04:36 PM.
    PDO Registration and Login tutorial @ http://www.jrpepp.com/displayPage.php?page=193
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    4
    Rep Power
    0
    Originally Posted by slime
    When you say small box appearing below, you are talking about the border itself right?

    But try adding this:

    Code:
    .auto-style1 {
        width: auto or 80px;
        height: auto;
        padding: 0;
        display: inline-block; }
    Yes, thanks for your suggestions; the changes did not seem to make any difference. Could you take a look at this box that seems to change colors correctly but is not the border around the picture. The file is called test.shtml, and it's in our church website, MidtownChurch dot net. You willl see the green partial box change to gold when hovering, then red once its clicked.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    I'm not sure what the issue is because what I suggested works.

    On the link you provided, I added this to the <a> tag, which is essentially the same as adding it to the .auto-style1, as long as it's applied the <a> tag:

    Code:
    { display: inline-block; }
    That's all it took to get it to work on your link.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    4
    Rep Power
    0
    Originally Posted by Strider64
    The class auto-style1 should go in the (a)nchor tag.

    Code:
    .auto-style1 {
    	display: inline-block;
    Thanks very much for all the helpful suggestions from everyone! I think the addition of the "display" parameter did the trick. It's now working flawlessly.

    Thanks again!

IMN logo majestic logo threadwatch logo seochat tools logo