Stop CSS from inheriting within certain classes

[TheDust]

I have all the links on my page being underlined when the mouse rolls over them, like such...

body a:link {color : #7800FF; text-decoration : none}
body a:visited {color : #7800FF; text-decoration : none}
body a:hover {color : #7800FF; text-decoration : underline}
body a:active {color : #7800FF; text-decoration : none}

I want to within class "m010o" to disable the underlines. Pretty simple, but I can't get it to work. I've tried many different variants of this to no avail:

body .m010o a:link {text-decoration : none}
body .m010o a:visited {text-decoration : none}
body .m010o a:hover {text-decoration : none}
body .m010o a:active {text-decoration : none}

Does anyone know what's WRONG with this??? Thanks to anyone that can help out!

 

[grtammi]

body .m010o a:link {text-decoration : none}
body .m010o a:visited {text-decoration : none}
body .m010o a:hover {text-decoration : none}
body .m010o a:active {text-decoration : none}


Turn the above around so it looks like this, and that should solve your problem:

a.m010o:link { etc etc etc ...

You don't even really need to set the body reference - just the styles for the class m010o.

As an example, I have a footer table on a page I am currently building (don't ask for the URL, I'm having positioning issues right now! ). Each link on the footer table is defined with the class name of "footer-link", and my style is set up as follows:

a.footer-link:link {text-decoration: none; color: #ffff00}
a.footer-link:visited {text-decoration: none; color: #ffff00}
a.footer-link:hover {text-decoration: underline; color: #ffff00}

HTH

Greg

If you don't understand, just nod and smile ...