1 visited link colors all links

HTML & CSS
1

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:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style media="all">


```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;}

&lt;div id="center"&gt;
&lt;h1&gt;Visited links color all at once&lt;/h1&gt;
&lt;img src="abstract-lines2.jpg" alt="" title="" /&gt;	
&lt;p id="maatwerk"&gt;&lt;a href="#"&gt;Maatwerk&lt;/a&gt;&lt;/p&gt;
&lt;p id="trappen"&gt;&lt;a href="#"&gt;Trappen&lt;/a&gt;&lt;/p&gt;
&lt;p id="meubelen"&gt;&lt;a href="#"&gt;Meubelen&lt;/a&gt;&lt;/p&gt;
&lt;p id="inox"&gt;&lt;a href="#"&gt;Inox&lt;/a&gt;&lt;/p&gt;
&lt;p id="aluminium"&gt;&lt;a href="#"&gt;Aluminium&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
```
2

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
:slight_smile:

3

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

4

dresden_phoenix,

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

5

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!