a:link visited/active - not working - why? please help

**mslee** · Mar 4, 2013 08:55

Please help. For some reason the a:link visited is not working
I need the background of the link to be black when visited/active and instead it reverts back to original colour - this is annoying because u cant tell what page u are on unless the link is black

Here is the HTML

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Intranet</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Intranet Home Page"/>
<meta name="author" content="Leanne Taylor" />
<meta name="robots" content="index, follow" />

<link href="CSS/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="CSS/links.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body background="" id="coshh">
<br></br>

<div id="homewrapper"> 
<br></br>
<img src="logo/newlogo.jpg" alt="Logo" title="Logo" width="200" height="160" class="floatImageLeft" />



<div id="nav">
<br></br>

<ul>
    <li class="index"><h3><a href="index.html">Home</a></h3></li>
    <li class="accident"><h3><a href="accident.html">Accident</a></h3></li>
    <li class="coshh"><h3><a href="coshh.html">CoSHH</a></h3></li>
	 <li class="emergency"><h3><a href="emergency.html">Emergency</a></h3></li>
	 <li class="fire"><h3><a href="fire.html">Fire Prevention</a></h3></li>
	 <li class="method"><h3><a href="method.html">Method Statements</a></h3></li>
    <li class="riskcon"><h3><a href="riskcon.html">Risk Control Arrangements</a></h3></li>
    <li class="permit"><h3><a href="permit.html">Permit To Work</a></h3></li>
	 <li class="policies"><h3><a href="policies.html">Policies & Procedures</a></h3></li>
	 <li class="riskass"><h3><a href="riskass.html">Risk Assessment</a></h3></li>
	  <li class="sitein"><h3><a href="sitein.html">Site Inspection</a></h3></li>
    <li class="sitepack"><h3><a href="sitepack.html">Site Pack</a></h3></li>
	 <li class="swine"><h3><a href="swine.html">Swine Flu</a></h3></li>
	 <li class="temp"><h3><a href="temp.html" >Temporary Works</a></h3></li>
	<li class="train"><h3><a href="train.html">Training</a></h3></li>
	 </ul>

</div><!-- nav ends here -->


<div id="content">

</div>
<!-- content ends here -->



<div id="footer">

</div> <!-- footer ends here -->

</div>
<!-- wrapper ends here -->

</body>
</html>
</html>

Here is the CSS

Code CSS:

#accident .accident a,
#coshh .coshh a,
#emergency .emergency a,
#fire .fire a,
#method .method a,
#riskcon .riskcon a,
#permit .permit a,
#policies .policies a,
#riskass .riskass a,
#sitein .sitein a,
#sitepack .sitepack a,
#swine .swine a,
#temp .temp a,
#train .train a;{ 
background-color:#000 !important; /* To override specificity on the page, !important has been added. */
color:#fff !important;
ext-decoration:none;
	}	
 
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
 
#nav ul li {
margin: 0 0 10px;
 
 
}
 
#nav ul li a {
border-left: none;
display: block;
font-weight: bold;
text-shadow: none;
-moz-text-shadow: none;
-webkit-text-shadow: none;
text-transform: uppercase;
padding: 2px 5px;
}
 
#nav ul li a:link{
background-color: #d6e3ec;
border: 1px solid #000;
border-left: none;
color: #000;
width: 200px;
border-radius: 0 1em 1em 0;
}
 
#nav ul li a:visited {
color: #000;
background-color: #d6e3ec;
}
 
#nav ul li a:hover{
position: relative;
color:#fff;
background-color:#000;
width: 200px;
border-radius: 0 1em 1em 0;	
 
}
 
#nav ul li a:active{
color:#fff;
background-color:#000;
text-decoration: none;
}
 
 ul li a{
 font-family:"Times New Roman", Times, serif;
 font-size: 16px;
 }

**RichardAskew** · Mar 4, 2013 09:00

Originally Posted by mslee

Please help. For some reason the a:link visited is not working
I need the background of the link to be black when visited/active and instead it reverts back to original colour - this is annoying because u cant tell what page u are on unless the link is black

You have the background-color of the visited block set to #d6e3ec, do you want that to be black?

**mslee** · Mar 4, 2013 09:06

if i change the background to black then it is black all the time - what i mean is that i need it to be black only when clicked and on hover too

**Stevie D** · Mar 4, 2013 12:17

Originally Posted by mslee

if i change the background to black then it is black all the time - what i mean is that i need it to be black only when clicked and on hover too

That isn't what "active" means ... it applies while you're clicking on the link, or activating it using the keyboard. CSS can't tell whether a link is pointing to the current page, so you need to put something in the HTML to tell it, usually something like <li id="current"> and then you can target li#current a {...} to give the styling you want.

There are other options as well ... if you want to know then just ask, I can't stop now because I'm running 5 minutes laaaaaaaate!