Free Consultation: +1 (888) 374 0906

Links are one of those things that are in every website so it is pretty important that you get them right. While I can't take the credit for this trick I can attest to the hours that this tool has saved me in tracking down odd css link related behavior.

The trick? A link stack. I don't know if that is what it is really called but that is what I am calling it and here is how it goes.

The link and active states can be defined together like so:
a:link, a:active{
text-decoration: none;
font-weight: bold;
color: #ff0;
}

Then comes the hover state:
a:hover{color: #f00;}

And finally the visited state:
a:visited {color#ff0;}

Why not just define the a{text-decoration: none;} and the hover you ask? It has been my experience (and our clever developer's testing) that in order to get reliable cross browser cross platform results links must be defined in this manner. That is the order the browser parses them in so that is how we write it in our css.

Every link defined in a SiteCM style sheet is defined in this way to ensure our clients the most professional and predictable functioning websites. That's just how we roll around here.

Oh and want another handy css trick to handle links?

Ever seen that dotted border that appears around links when you click on them in Mozilla Firefox and IE6? I hadn't until one of our resellers pointed it out to me during an implementation we worked on together. So I hunted for a solution and came up with one:
a{outline: none;}

That's it. By including that as a global definition in your style sheet you remove that pesky little dotted border and maintain nice clean links that behave just as you asked them to.
Write A Comment

Post A Comment

 
Submit
Designing with SiteCM » Blog Archive » CSS Quick Tip Tuesday :: Stacking Selectors
Tuesday, November 9th, 2010 at 6:19AM
[...] Now we all know how to define the a tag because you’ve all ready my first quick tips post Lovable Links. So you will know that to define a link tag you need up to four different css declarations. What if [...]

Sign up for email updates from our team

View Our Privacy Policy or Terms of Use