Link's and Pseudo links, not working

HTML & CSS
1

I’m having trouble getting my links to appear the correct color, I have a feeling it has something to do with the order the links appear in the CSS.

Basically under “Friends” on the sidebar you can’t see the link state, but when you hover it shows the hover state (in orange).
Same with in the about me at the top, at the end of the sentence “hire me” only displays the correct hover color.

So - the hover state works for my pseudo a links, but not the normal state. In the CSS “a.bar:link” is my sidebar links. I set the normal state to red just to see if it works and it doesn’t!

Thanks in advanced.

here it is live: http://seelooh.com/test/

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">

* {
	padding: 0;
	margin: 0;
}

body {
	font-family:Euphemia, Times, serif;
	color: #353535;
	background-image: url(images/bg.jpg);
}

#header {
	width: 100%;
	height: 145px;
	background-color: #353535;
}

#container {
	height: 100%;
	width: 940px;
	margin-right: auto;
	margin-left: auto;
}

#leftContent {
	float: left;
	height: 100%;
	width: 670px;
	border-right: 1px solid black;
	padding-right: 7px;

}

#rightContent {
	float: right;
	height: 100%;
	width: 240px;
	padding-left: 2px;
}

#logo {
	width: 485px;
	height: 56px;
	background-image: url(images/logo.png);
}

#logoHolder {
	margin-right: auto;
	margin-left: auto;
	width: 940px;
	height: 40px;
	padding-top: 40px;
}

#myNameHolder {
	margin-right: auto;
	margin-left: auto;
	height: 100%;
	width: 940px;
}

#nav {
	text-align: center;
	padding-top: 30px;
}

#nav li {
	list-style-type: none;
	display: inline;
	padding-right: 20px;
}

a:link {
	color: #e4e4e4;
	text-decoration: none;
	font-size: 17pt;
	font-weight: bold;
}

a:visited {
	color: #e4e4e4;
}

a:hover {
	color: #ffc000;
}


a.bar:link {
	color: red;
	text-decoration: none;
	font-size: 13pt;
	font-weight: bold;
}

a.bar:hover {
	color: #ffc000;
}


p.myName {
	font-size: 15pt;
	color: #464646;
	font-weight: bold;
}

p.readmore {
	font-size: 11pt;
	color: #464646;
	font-weight: bold;
}

p.side {
	font-size: 14pt;
	color: #464646;
}

p {
	font-size: 15pt;
	color: #464646;
}

h1 {
	font-size: 24pt;
	color: #353535;
	font-weight: bold;
}

#divider {
	background-image: url(images/divider.jpg);
	width: 940px;
	height: 2px;
	margin-right: auto;
	margin-left: auto;
}

#postDivider {
	background-image: url(images/postdivide.jpg);
	width: 620px;
	height: 2px;
}

img {
	border: 1px solid black;
}

#footer {
	width: 940px;
	height: 200px;
	margin-right: auto;
	margin-left: auto;
}

</style>

</head>
<body>



<div id="header"> <!-- Begin Header Div -->
	<div id="logoHolder"><div id="logo"></div></div> <!-- End Logo Div and div Holder -->
    
    <ul id="nav">
    	<li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">hire me</a></li>
        <li><a href="#">portfolio</a></li>
      </ul>
    

</div> <!-- End HEADER Div --> 


	<div id="myNameHolder"> <!-- Begin Name Holder -->
    	<p class="myName">My name is Chris. I live in Atlanta, GA and happen to love the internet. I'm a programming major with years of experience in well..lots of things. You can learn a lot here, or if your too lazy you can <a class="bar" href="#">hire me</a>.</p>

	</div> <!-- End Name holder--> 
    
    <div id="divider"></div>
<div id="container"> <!-- Begin Container --> 
    
    <div id="leftContent">
    <h1>Using CSS3 the correct way</h1>
    <img src="images/postimage.jpg" width="640" height="167" alt="postimage" />
	<p>Using CSS3 is a new tactic that can really help your designs flow. Want to learn more? Check out this article.</p> 
    <p class="readmore">Read More</p>   
    <div id="postDivider"></div>
    
    <h1>Using CSS3 the correct way</h1>
    <img src="images/postimage.jpg" width="640" height="167" alt="postimage" />
	<p>Using CSS3 is a new tactic that can really help your designs flow. Want to learn more? Check out this article.</p> 
    <p class="readmore">Read More</p>   
    <div id="postDivider"></div>
    
    <h1>Using CSS3 the correct way</h1>
    <img src="images/postimage.jpg" width="640" height="167" alt="postimage" />
	<p>Using CSS3 is a new tactic that can really help your designs flow. Want to learn more? Check out this article.</p> 
    <p class="readmore">Read More</p>   
    <div id="postDivider"></div>
    
       Older Posts

    </div>

    <div id="rightContent">
    <p class="side">Twitter me:</p>
    <b>@cluongoatl</b>
    <br /><br />
    <p class="side">Friends</p>
    <a class="bar" href="#">Tech-Recipes</a>
    
    </div>
    

</div> <!-- End Container -->




</body>
</html>
2

It sounds like the problem is that you’re getting the :visited link state, even on the class="bar" links. You need to define a.bar:visited {...} as well, to ensure that you get the state you want.

You can check this on your computer by clearing your browser cache or using a different browser, one where you have not already clicked on the link.

(Do you really want your :visited link state to be effectively invisible?)

3

Thanks that solved it!

And on the navigation bar, they’re so few links that I don’t think a visited state would be necessary. Just on the navigation though.

Thanks for the help Stevie

-Chris