SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1 visited link colors all links

    Hi, if i click on one link, all my links color at the same time as visited and i can't figure it out why. The next time i visit the page, they still are colored.

    test.knappewebsites.be for a live preview, but you have to copy paste it in to your browser, not in your search field, it is a temporary sub domain.

    All help is highly appreciated!

    here is the code:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <style media="all">
    
    
    Code CSS:
    /* clear */
     
    article, aside, figure, figcaption, footer, header, main, nav, section { display:block; }
     
      * {margin:0; padding:0;
      	 -moz-box-sizing: border-box; 
      	 -webkit-box-sizing: border-box; 
      	 box-sizing: border-box;}
     
    html {font-size:1rem;}	 
     
    h1 {
    	font-family:wildscratch;
    	font-weight:normal;
    	margin:0;
    	padding:0;
    	font-size:6rem;
    	}
     
    img {max-width:100%;
    	 border: solid 5px white;
        -moz-box-shadow: 0 0 1px 1px #999;
        -webkit-box-shadow: 0 0 1px 1px#999;
        box-shadow: 0 0 1px 1px #999;}
     
    #center {width:80%;
    		 margin:0 auto;}
     
    a:link {text-decoration:none;
    		color:black;}		 
     
    a:visited {color:red;}
     
    a:hover {color:white} 
     
    a:active {text-decoration:none;
    		  color: #999;
    		  position: relative;
    		  top: 1.5px;}	
     
    #maatwerk {position:absolute;
    		   left:15%;
    		   margin-top:-35%;
    		   padding:1px 4px;
    		   background:white;
    		   color:black;
    		   text-decoration:none;}
    #maatwerk:hover {position:absolute;
    		   left:15%;
    		   margin-top:-35%;
    		   padding:1px 4px;
    		   background:black;
    		   color:white;
    		   border:solid 1px white;
    		   font-size:1.25rem;}
     
    #trappen {position:absolute;
    		   left:25%;
    		   margin-top:-25%;
    		   padding:1px 4px;
    		   background:white;
    		   color:black;
    		   text-decoration:none;}
    #trappen:hover {position:absolute;
    		   left:25%;
    		   margin-top:-25%;
    		   padding:1px 4px;
    		   background:black;
    		   color:white;
    		   border:solid 1px white;
    		   font-size:1.25rem;}
     
    #meubelen {position:absolute;
    		   left:80%;
    		   margin-top:-37%;
    		   padding:1px 4px;
    		   background:white;
    		   color:black;
    		   text-decoration:none;}
    #meubelen:hover {position:absolute;
    		   left:80%;
    		   margin-top:-37%;
    		   padding:1px 4px;
    		   background:black;
    		   color:white;
    		   border:solid 1px white;
    		   font-size:1.25rem;}
     
    #inox {position:absolute;
    		   left:75%;
    		   margin-top:-20%;
    		   padding:1px 4px;
    		   background:white;
    		   color:black;
    		   text-decoration:none;}
    #inox:hover {position:absolute;
    		   left:75%;
    		   margin-top:-20%;
    		   padding:1px 4px;
    		   background:black;
    		   color:white;
    		   border:solid 1px white;
    		   font-size:1.25rem;}
     
    #aluminium {position:absolute;
    		   left:55%;
    		   margin-top:-5%;
    		   padding:1px 4px;
    		   background:white;
    		   color:black;
    		   text-decoration:none;}
    #aluminium:hover {position:absolute;
    		   left:55%;
    		   margin-top:-5%;
    		   padding:1px 4px;
    		   background:black;
    		   color:white;
    		   border:solid 1px white;
    		   font-size:1.25rem;}
    </style> </head> <body>
    HTML Code:
    <div id="center">
    <h1>Visited links color all at once</h1>
    <img src="abstract-lines2.jpg" alt="" title="" />	
    <p id="maatwerk"><a href="#">Maatwerk</a></p>
    <p id="trappen"><a href="#">Trappen</a></p>
    <p id="meubelen"><a href="#">Meubelen</a></p>
    <p id="inox"><a href="#">Inox</a></p>
    <p id="aluminium"><a href="#">Aluminium</a></p>
    </div>
    </body> </html>

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Welcome to Siterpoint Demoman.



    Visited link actually means a URL you have visited ( not that you have clicked on a particular icon) Whats happening is you are using a place holder URL ('#') for all links, as such once you have clicked on any of your place holder links you have 'visited' '#' as such any link with HREF='#' will show up as visited.

    hope that helps

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What browser is displaying this behavior? I am using IE11 and it does not display this behavior you speak of. Each individual link has to be clicked to get a red font color for me. All links have the same href so the browser might recognize the links as the same and give it :visited.

    Edit-Ninja'd
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Member
    Join Date
    Jul 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Welcome to Siterpoint Demoman.



    Visited link actually means a URL you have visited ( not that you have clicked on a particular icon) Whats happening is you are using a place holder URL ('#') for all links, as such once you have clicked on any of your place holder links you have 'visited' '#' as such any link with HREF='#' will show up as visited.

    hope that helps
    dresden_phoenix,

    You nailed it!
    Thanks a lot and have a nice day!

  5. #5
    SitePoint Member
    Join Date
    Jul 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    What browser is displaying this behavior? I am using IE11 and it does not display this behavior you speak of. Each individual link has to be clicked to get a red font color for me. All links have the same href so the browser might recognize the links as the same and give it :visited.

    Edit-Ninja'd
    RyanReese,

    You are right as well.
    I tested in chrome, firefox, safari and opera. Seems like IE slipped my mind.
    Many thanks and have a nice day!


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
  •