June 24, 201115 yr My "friend" has this really embarassing and basic CSS problem. He wants a link to be bold and underlined, but unbold and no underline when visited. He thinks he's tried everything. <style type="text/css"> a.pst:link { text-decoration: underline; font-weight: bold; color: blue; } a.pst:visited { text-decoration: none; font-weight: normal; color: red; } a.pst:hover { text-decoration: underline; font-weight: bold; color: orange; } a.pst:active { text-decoration: underline; color: green; } </style> To test that the html was working he added colours to each state. The colours work, but the others don't. I've tested this on 4 browsers. Please help me. I mean him.
June 24, 201115 yr Author link visited active hover - they need to be in that order I thought it was meant to be in the order of LoVe HAte. But I've changed it to be as you suggest and it's made no difference. <style type="text/css"> a.pst:link { text-decoration: underline; font-weight: bold; color: blue; } a.pst:visited { text-decoration: none; font-weight: normal; color: red; } a.pst:active { text-decoration: underline; color: green; } a.pst:hover { text-decoration: underline; font-weight: normal; color: orange; } </style>
June 24, 201115 yr Yup should be LoVe HAte as you said. Try... <style type="text/css"> .pst a:link { text-decoration: underline; font-weight: bold; color: blue; } .pst a:visited { text-decoration: none; font-weight: normal; color: red; } .pst a:hover { text-decoration: underline; font-weight: bold; color: orange; } .pst a:active { text-decoration: underline; color: green; } </style>
June 24, 201115 yr Author Yup should be LoVe HAte as you said. Try... <style type="text/css"> .pst a:link { text-decoration: underline; font-weight: bold; color: blue; } .pst a:visited { text-decoration: none; font-weight: normal; color: red; } .pst a:hover { text-decoration: underline; font-weight: bold; color: orange; } .pst a:active { text-decoration: underline; color: green; } </style> No formatting or colourisation at all now...
June 24, 201115 yr that'll teach me for looking it up here and not w3c http://www.echoecho.com/csslinks.htm
June 24, 201115 yr That's because i'm an absolute fool who didn't read your post properly doh! You're original code should work, do you have the section of the HTML code for us to see? Edited June 24, 201115 yr by MikeChipshop
June 24, 201115 yr that'll teach me for looking it up here and not w3c http://www.echoecho.com/csslinks.htm To be fair 99% of the time i have... a:link, a:visited, a:active { style:here; } a:hover { Style:here; } any way.
June 24, 201115 yr Author That's because i'm an absolute fool who didn't read your post properly doh! That should work, do you have the section of the HTML code for us to see? <html> <head> <style type="text/css"> a.pst:link { text-decoration: underline; font-weight: bold; color: blue; } a.pst:visited { text-decoration: none; font-weight: normal; color: red; } a.pst:hover { text-decoration: underline; font-weight: normal; color: orange; } a.pst:active { text-decoration: underline; color: green; } </style> </head> <body> <a href="http://www.google.co.uk" class="pst">Visited</a> | <a href="http://www.google.co.uk/sdfsdfsdfkljhsaf98fljfsd" class="pst">UnVisited</a> </body> </html>
June 24, 201115 yr is that the actual page or do you have an #ID before it that is overriding the class?
June 24, 201115 yr Author is that the actual page or do you have an #ID before it that is overriding the class? No, that's it. I tried to strip it right down to this to sort the problem...
June 24, 201115 yr Author Hmmm i don't admitting i'm stumped... Good. I think. I was paranoid I was doing something really stupid and didn't want to embarass myself on here with my first post. I did wonder whether it was a setting in my browser that prevented it from behaving properly, but it does that in all my browsers. Could I ask if you created a test.html of that file, did it misbehave for you too?
June 24, 201115 yr Could I ask if you created a test.html of that file, did it misbehave for you too? I used yours... no avail, so i then re-created from scratch and no again to no avail. Able to change colours but text decoration and weight i'm un-able manipulate. Very strange and not something i've noticed before :s
June 24, 201115 yr wow, mind boggling, i have tried putting it into a list, and styling from there, tried with css resets, tried with border's instead of underlines..... Wow! This is possibly the first issues WDF hasnt been able to resolve :/
June 24, 201115 yr Author Booo! Thanks for the help guys. I'll look around and see what I can find and report back. If you have any other sources I'd appreciate a solution. Or maybe I can tell you why I want this effect and you can suggest alternatives. The formatting is for a forum, where I want to indicate where a thread has been read or not. Changing the colour is fine, but wanted a bit of extra style around it. I'm totally sure that my code in the past used to work you know. What happened?!
June 24, 201115 yr I'm 100% sure i have used something similar in the past. That's why i can't help thinking we're all over looking something obvious... hmmmmm
June 24, 201115 yr I'm 100% sure i have used something similar in the past. That's why i can't help thinking we're all over looking something obvious... hmmmmm same, i made sure everything was properly closed, everything was correct code wise but no solutiom >
June 24, 201115 yr a clue? Note: Descendant selectors for links inherit properties defined in the main link styles, so there's no need to specify font-weight or text-decoration again. However, the descendant selectors are more specific, which is why the different colors are applied. from http://www.coldfusion.se/devnet/dreamweaver/articles/css-selectors-pt1.html
June 24, 201115 yr http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ I'm sure other modern browsers have taken the same approach for security reasons.
June 24, 201115 yr Author http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ I'm sure other modern browsers have taken the same approach for security reasons. This does look to be the reason why it no longer works. My brain isn't sophisticated enough to work out how I could use this previous vulnerability, but at least it'll stop me looking for reasons why it's not working. Thanks for your help.
June 24, 201115 yr Damn, i have no idea how i missed that! It must be because i never ever style the visited link different to the other links as it looks damn ugly! Edited June 24, 201115 yr by MikeChipshop
Create an account or sign in to comment