erikegon@vandestolpe.com Posted May 11, 2013 Share Posted May 11, 2013 (edited) 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 May 12, 2013 by erikegon@vandestolpe.com Link to comment Share on other sites More sharing options...
jeffman Posted May 11, 2013 Share Posted May 11, 2013 Fix these selectors before you try anything else: #dblist a:s2:visited #dblist a:s3:visited Link to comment Share on other sites More sharing options...
erikegon@vandestolpe.com Posted May 12, 2013 Author Share Posted May 12, 2013 (edited) Thanks Deirdre's Dad, I fixed it and also updated the initial post. The correction doesn't alter the behavior, the question's still open. Edited May 12, 2013 by erikegon@vandestolpe.com Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now