Class Shorthand Problem

link colors aren't consistent

[Lorel]

I have several buttons on a page. I have set each one up as a background image. I then have a link floating over the buttons so search engines can pick up the link text. However the link colors work on some buttons and not others when they are all listed the same - some of them revert to the default colors (I have colors listed in the default link set up also)

Here is the CSS for the background images:

.button-furnace {
height:150px; width:150px;
background: url(images/button-furnace.gif) no-repeat; }

Here is the CSS to format the link colors for the buttons (different from the default colors which are blue)

.button150 a:link, a:visited { color: #000000; }
.button150 a:hover, a:active { color: #666666; }

The varied black and blue colors show up on all browsers so I don't think it's a browser problem..

I'm concerned about the above CSS shorthand being the problem.

Here is a portion of the HTML:

</td><td class="button150" align="center">
<div class="button-ac">
<a href="air_conditioners.htm" style="position:relative;top:127px;">&nbsp; Air Conditioners</a>
</div>
</td></tr><tr><td class="button150" align="center">

....etc.

The CSS and HTML validate.

Can anyone see the problem?

[Fotiman]

Your specificity on your visited and active rules is lower. You have this:
.button150 a:link, a:visited { color: #000000; }
.button150 a:hover, a:active { color: #666666; }

Should be this:
.button150 a:link, .button150 a:visited { color: #000000; }
.button150 a:hover, .button150 a:active { color: #666666; }

[Lorel]

Thanks Fotiman,

That worked.

I looked all over the internet and couldn't find a good explanation of shorthand for this situation.