Ok...this is one of the weirdest 'behaviors' I have ever seen in theming!! Look at the following CSS code:

a:link, a:visited { color: #BBBDBF; text-decoration: none; } 
a:hover { color: #CB2127; text-decoration: none; }
a:active { color: #A6A8AC; text-decoration: none; color: #000; }

#front-page-cloud { padding: 25px 0 0 0; float: left; }  
#front-page-cloud a:link { color: #475b62; } 
#front-page-cloud a:visited { color: #475b62; } 
#front-page-cloud a:hover { color: #CB2127; }
#front-page-cloud a:active { color: #475b62; }

This behaves exactly as you would expect in an HTML file -- that is, plain links are one color and links within a div with an id="front-page-cloud" are another. HOWEVER, if I put it in 'global.css' in the Omega theme, it doesn't work until I add an '!important' to each of the #front-page-cloud lines. How can a theme affect the way specificity is applied within the same style sheet!!????

Comments

MhueD’s picture

MhueD commented

Oh shoot! I mean...good...but...my site stopped doing this, which is good, but I wanted to catch WHATEVER it was about, which is bad. I ended up clearing the cache about 20 times and it went away. Cache clear sometimes gets clogged somehow and some VERY weird stuff can happen.

cellar door’s picture

cellar door commented
Status: Active » Closed (works as designed)

I'll close this out but it sounds like the cached files didn't clear properly and you were getting some inheritance issues. If it creeps back feel free to open it again and we'll help debug. Glad to hear it's working though!

Peng.Pif’s picture

Peng.Pif commented

Hi all, I'm having the same issue. My CSS is:

a:link, a:visited {
  color: #222;
  text-decoration: underline;
}

a:hover {
  color: #CCC;
  text-decoration: none;
}

a:active {
  color: #CCC;
  text-decoration: none;
}

And then further in the stylesheet:

#block-block-3 .content a:link, a:visited {
  color: #FFF;
  text-decoration: underline;
}

#block-block-3 .content a:hover {
  color: #CCC;
  text-decoration: none;
}

#block-block-3 .content a:active {
  color: #000;
  text-decoration: none;
}

I've tried clearing the cache many times but this doesn't fix anything for me. The links on my entire site take their styling from #block-block-3.

This code is all in global.css. Any ideas what could be causing this?

dhalbert’s picture

dhalbert commented 
#block-block-3 .content a:link, a:visited {
  color: #FFF;
  text-decoration: underline;
}

In the CSS above, the a:visited is not part of the #block-block-3 .content selector. So your a:visited is applying to all <a> tags. Instead, you've written something equivalent to:

#block-block-3 .content a:link
  color: #FFF;
  text-decoration: underline;
}
a:visited {
  color: #FFF;
  text-decoration: underline;
}

So you want:

#block-block-3 .content a:link, #block-block-3 .content  a:visited {
  color: #FFF;
  text-decoration: underline;
}
Peng.Pif’s picture

Peng.Pif commented

Yikes! Thanks dhalbert, works perfect now :)