Proper way of styling links on other page - html

Question

My main navigation bar is like this: JSFIDDLE
<div id="navbar">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Projects</li>
<li id="active">Contact</li>
<li>Friends</li>
</ul>
</div>
The css for it is as follow:
#navbar {
float: left;
height: 100px;
width: 395px;
background-color: orange;
background-color: #CCCCCC;
background-image: url(../images/1_03.jpg);
}
#navbar ul{
list-style-type: none;
margin-top: 30px;
}
#navbar li{
float: left;
text-align:center;
width: 60px;
}
#navbar a:link, a:visited {
display: block;
width: 100%;
height: 50px;
font-size: 14px;
color: rgba(141,141,141,1);
text-decoration: none;
padding-top: 20px;
font-family: Raleway, sans-serif;
-moz-transition: background-color 0.3s ease;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
font-weight: 500;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#navbar a:hover, a:active {
color:white;
background-color: #ff7200;
}
#active > a {
display: block;
color: white;
background-color: rgba(51,51,51,1);
}
Now I have on contact page my icon images, which links to the user's profile on Facebook, Twitter, etc., but they get the same background when in active state like my navigation bar. How can I change that?

Answer 1

I think your problem is in your way of defining css :
#navbar a:hover, a:active should be #navbar a:hover, #navbar a:active