AlanBarber.Org
Monday, August 23, 2004
A Quick CSS Tip
Here’s something I just learned today…
When coding CSS for the pseudo-classes of the < a > tag, the states should always be coded in this specific order:
a:link
a:visited
a:focus
a:hover
a:active
If you don’t do it in this order it can cause issues with links in most browsers. Including improper rendering or even failure to follow the CSS display settings for links.
I actually didn’t know it mattered. However I know it does now. The order of the link tags was wrong in the CSS for this site and I have had issues with link rendering. Some links would not change colors when I would hover over them. I had written it off as a stupid browser issue. However, Sure enough soon as I changed the order in my CSS all the link problems went away.
A quick note that most of the included themes with ExpressionEngine do have improper ordering so all you EE users out there should go in and correct this.
But keep that in mind for all your web designers too. Just a nice little tip to remember.
Computers & Technology •
Tips & Tricks •
Blogging •
ExpressionEngine •
(2) Comments •
Permalink
I am a web designer. You have nicely described CSS coding for the pseudo-classes of the < a > tag. It would be helpful for new comers in web designing field. Thanks for the nice post.
I am glad to see that someone else is interested in CSS. I think that it is a good tool that is under utilized by many web developers. I have been trying to use it as much as possible in the things that I have been doing latley, but I find that there are many things that I am possitive it does but have no idea how to make it happen. Thanks for the tips, every little bit helps.