Blocking some styles on a page

[Grunty]

I have a style sheet that is applied to all pages in my site. It defines background and a:active/hover/link/visited as well as some text and paragraph formatting

I am going to add a naviagtion menu containing graphical buttons to some of the pages and would like to know how to prevent the a:active/hover/link/visited styles applying themselves to the buttons while still applying to text links on the same page.

Is there a way of blocking them? or could I somehow redefine the link styles in the navigation <table> tags?

Any advice appreciated

[gil davis]

You can make distinctions in a couple of ways.

You can specify that all anchors inside a table cell (TD) will have the different style: TD A {some style statements}

You can also use classes: .menu {some style statements}
...
<a class="menu" href="...">

[Grunty]

Thanks for that, I have attempted your suggestion but it doesnt work. This will almost certainly be my fault as I am not sure what style statement I should use to overide the others.

[gil davis]

Since you did not post a link or any code, I could not be more specific. In fact, I was not sure what you meant by "the buttons". Here is a simple example for you to consider:
<style>
A {color: green}
A: hover {color: yellow}
TD A:hover {color: green}
</style>
<table>
<tr><td><a href="#">This should be a plain green link</a></td></tr>
</table>
<a href="#">This should change to yellow on mouseover</a>

[Grunty]

OK, What I have at the moment is:

<table><tr><td><a href="filename">Text</a></td></tr></table>

The a:link {text-decoration: none; color: #0000FF}
a:visited {text-decoration: none; color: #6A5ACD}
a:hover {text-decoration: none; color: #FFFFFF; background-color: #000066}
a:active {text-decoration: none; color: #6A5ACD}
styles apply to this link as well as:

<table><tr><td><a href="filename"><img name="image" src="folder/image.gif"></a></td></tr></table>


My goal is to prevent these styles from affecting the graphic image.
I have tried using "td a:hover" etc which worked on the graphic but also affected the text link as they are both inside a table cell.

I have also tried:
.menu.a:link {text-decoration: none; color: White}
.menu.a:visited {text-decoration: none; color: White}
.menu.a:hover {text-decoration: none; color: White; background-color: White}
.menu.a:active {text-decoration: none; color: White}

and then

<table><tr><td><a class="menu" href="filename"><img name="image" src="folder/image.gif"></a></td></tr></table>

but this did not work, or if it did, it was still overwritten by the original a:hover/link/visited/active styles.

Any help would be gratefully accepted, and also some suggestions for a good source of CSS information to fill the gaps in my knowledge as it looks like I am going to be using CSS alot more than I first thought.

Thanks

[Hester]

Your second approach is the right way to do it, but this code is wrong:

.menu.a:link {text-decoration: none; color: White}

It says "if class 'menu' then class 'a' then a link" but there is no class a. You need to remove the dot.

I use this in my stylesheets to override the main link styles:

a.styles:link {color:#33c;}

This says "if element 'a' then also class 'styles' and a link, use specified colour". Try it.

[Grunty]

Many thanks, that last piece of code you gave me worked a treat.