Jump to content

pseudo-classes not working


Recommended Posts

For a monitoring application there is a list of devices. Each name contains a link to the device's report on it's state. The state of each device may be s0 (normal, nothing to report), s1 (only informational alerts were found), s2 (one or more warnings were found) or s3 (errors). I created a class for each state. The s3 class is indicated with red text in bold. Once an operator has clicked the link the font-weight:bold is removed. Pseudo-class :visited doesn't do what it is supposed to. It doesn't apply font-weight, color. Hovering the link behaves as expected. This behavior is consistent for Firefox, IE, Chrome and Safari.Pseudo-class :link doesn't work as expected. The color is not applied, but the font-weight is. Uncommenting the rule #dblist a.s3:link doesn't change the color, but there IS a border. The behavior is consistent: FF, Chrome, Safari and IE all display my page identical. I must be overlooking something or I declare things in the wrong order (I think :link, :visited, : hover, :active is the correct order), or I do not understand styling links at all. Below is a sample of the code. What is going wrong here? If someone can shed some light or if someone can post *working* code, it would be much appreciated. Thanks,Erik.

<html><head>   <title> Monitoring </title>   <style type="text/css">   * {	  color : #322D5F;	  font-family : Verdana;	  font-size : 10pt;   }    #dblist {	  width : 300px;	  margin : 20px auto;	  border : 1px solid #ccc;	  padding : 5px;   }    #dblist a {	  padding : 1px 0;	  display : block;	  text-decoration : none;   }    #dblist a.s0 {	  color : green;   }    #dblist a.s1 {	  color : black;   }    #dblist a.s2 {	  color : blue;   }    #dblist a.s2:visited {	  font-weight : bold;   }    #dblist a.s3 {	  color : red;	  font-weight : bold;   }/*   #dblist a.s3:link {	  color : orange;	  font-weight : normal;	  border: 3px solid blue;   }*/   #dblist a.s3:visited {	  color : gray;	  font-weight : normal;   }    #dblist a:hover {	  font-weight : normal;	  color : black;	  background-color : #eee;   }    </style></head><body>   <div id="dblist">	  <div>		 <a class="s2" link="pChart" href="http://pchart.sourceforge.net" target="_blank"> pChart Server </a>	  </div>	  <div>		 <a class="s3" link="apache2" href="http://httpd.apache.org" target="_blank"> Apache Server </a>	  </div>	  <div>		 <a class="s0" link="MySQL" href="http://www.mysql.com" target="_blank"> MySQL Server </a>	  </div>   </div></body></html>

Edited by erikegon@vandestolpe.com
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...