Question

I have a page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can’t seem to get the text color to appear white.

Here is my CSS:

.button 
{
  display: block;
  background: #4E9CAF;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  text-color: white;
  font-weight: bold;
  text-decoration: none;
}

a:button.visited 
{
  display: block;
  background: #4E9CAF;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  text-color: white;
  font-weight: bold;
  text-decoration: none;
}

and here is how I make the link with HTML:

<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>

Any idea what is going wrong and why the color of the link isn’t white?

Answer 1

That’s because a:link (line 95) is more specific than .button (line 109).

You can fix it by changing the rule to

.button,
a:link.button {
    /* rules */
}

Tips:

• While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse – http://www.w3.org/TR/CSS2/cascade.html#important-rules
• Use Firebug for Firefox, or Chrome’s inspect element, to check the css affecting a given element.