Odd Link Color/Hover Color Problem

Darter02

I'm experimenting with a new theme color scheme for certain pages. In order to have more control of what colors appear in each theme I've eliminated all my block specific CSS control over link color/hover color. I now use the Custom Theme's Avanced Tab's Custom CSS menu. There I place:

a {
  color: #[COLOR="Red"]SOME COLOR[/COLOR];
}

a:hover {
  color: #[COLOR="Red"]SOME COLOR[/COLOR];
}

It seems to work for to help distinguish the different color themes for the most part. When checking things out on different browsers I'm getting an odd problem with Chrome.

In IE10 things look correct. There are 4 links. The "Return to Top," the address, the Bay Photo, and the email link.



In Firefox thing look mostly correct. In this browser the address link looks like the normal text color.



But in Chrome only the email link, and Return to Top appear correctly. This happens in both my new theme, and the site-wide theme.



Does anyone have a clue as to why? Do I need to have that "a" capitalized or something?

thenickdude

You're probably running into the issue that there are several CSS rules being applied to those links with the same precedence, and in that situation I've seen disagreement between browsers as to which one gets applied. The easy way to solve it is to just add !important to the end to override any rules that haven't also got !important in them:

a {
  color: #SOME COLOR !important;
}

a:hover {
  color: #SOME COLOR !important;
}

You might also need to do this:

http://meyerweb.com/eric/css/link-specificity.html

Especially you should be setting a :visited colour.

Darter02

Thanks! I'll see if I can sort this out.

Darter02

Cool beans. You helped me sort this out. I found two small blocks where I had CSS to effect link colors and eliminated them.

I also changed my code to:

/*Link Colors*/
A:link {
 COLOR: #[COLOR="Red"]MY COLOR CODE[/COLOR]!important; /*The color of the link*/
}
A:visited {
 COLOR: #[COLOR="Red"]MY COLOR CODE[/COLOR]!important; /*The color of the visited link*/
}
A:hover {
 COLOR: #[COLOR="Red"]MY COLOR CODE[/COLOR]!important; /*The color of the mouseover or 'hover' link*/
}

Now all is working in all browsers. Thanks!