orangeacid.net

Quick fix for strange CSS link behavior

Posts on GTD and photography for Scenes and Emos in the pipeline, but just a quick update - something that I discovered working on a website for a school project earlier. If you’re not into webdesign, give this one a miss.

If you’ve any experience in semantic webdesign/xHTML+CSS, you will know how… well, frankly what an arse IE is to code for. One of my pet hates is the way that it handles the :hover pseudo class. Firstly, it only works on links, and secondly, I personally have encountered a large number of seemingly unexplainable errors that occur after the link has been followed.

First, some background theory.  The order of a CSS document is important - if two styles for an element exist, the last property will always win. Because of this, it is important to put your pseudo classes in the right order. This order is:

1. :link
2. :visited
3. :hover
4. :active

It is easy to remember this if you remember that you will have a love/hate relationship with pseudo classes - that’s link visited hover active.

This is fair enough, but sometimes certain properties won’t work after the link has been followed in IE<7.

OK. So, the solution?

Leave off the :link pseudo class. Your styles will work (as far as I can tell) just fine, without the strange, seemingly random errors. If in doubt, add a blank and pseudo-classed selector for each link.