CODEWITHSUNDEEP
htmlcss
gondolfier
gondolfier

Reputation: 221

CSS not changing color of link in Chrome

I have a css declaration as:

.textBox{
  color: Orange;
  font-size: 17px;
  background: rgba(100, 200, 200, 0.7);
  }

.textBox a:link, .textBox a:visited{
  color: Blue;
  border: 1px solid Black;
  text-decoration: none;
  background: none;
  }

.textBox a:hover, .textBox a:active, .textBox a:focus {
  background: rgba(0,0,0,0.5);
  color: Red;
  }

Then I apply the class "textBox" to a div. The forst "color" property, the one in the class itself ("Orange") works. The text has orange color. But I cannot change the color of the links. Neither while they're "normal" nor when I hover over them. The other properties of the link (border, background, etc) work fine both in "normal" state and when hovering.

I'm on OSX 10.6.8. Chrome 33.0.1750.58 beta doesn't display the link colors (text) in blue and doesn't change the link color to red when hovering. It does change the background on hovering and it does show a border around the link.

FF26 works fine. Blue links that turn red on hovering.

Any idea of what is happening?

Thank you!

UPDATE: Sorry, my wrong. It's not working in FF26 properly either. I went a bit too hasty there. I had left it out to simplify matters but the css also contains:

.textBox h1{
  margin-bottom: 7px;
  color: Black;
  }

In Chrome, links within h1 will appear like links in the main text (some sort of grey, that I haven't set as a color at any level). In FF26, links within a h1 mark will appear blue and turn red on hover, whereas links in the main text will appear the same kind of grey as in Chrome. The h1 mark works fine (Black color and correct margin).

As for the html:

<div style="" class="textBox">
  <h1><a href="bar.php">This Document </a>Contains Descriptions</h1>
  <p>Check also <a href="foo.php">sample books</a> foo bar.</p>
</div>

Upvotes: 0

Views: 7964

Answers (4)

Kiflaam
Kiflaam

Reputation: 23

I had a similar problem, but only one style-sheet. Everything was receiving its intended style, except links. For whatever reason, I fixed my problem by fixing a caps typo in the style-sheet name.. one letter that was S and not s in the filename. I find this weird since all the other elements were receiving their styles....

Upvotes: 1

gondolfier
gondolfier

Reputation: 221

It was a simple thing: I had two calls in the head: 

<link href="css/bar.css" rel="stylesheet" type="text/css" media="all"></link>
<link href="css/foo.css" rel="stylesheet" type="text/css" media="all"></link>

and they were in the wrong order. So that my .textBox a:color was overrided later on by a general body a:color.

Found that out as I was creating a fiddle to share. So thanks for that advice!

Sorry for posting the question, but after a couple of hours of staring at the screen, I felt I was going mad and needed some one else's eyes to look at it for a second. Thanks for all the suggestions!

UPDATE: Man, this is becoming embarrassing. Anyhow, the solution of changing the order worked on my home MAMP installation, and it worked for FF26 on the "real" online server that I use (Apache, not sure of the details). When accessing the online page with Chrome I had the same problem as earlier. To solve it, I had to remove the lines:

.mmBack a, .mmBack a:visited{
  color: rgb(75,75,75);
  }

from bar.css. Somehow, the declaration above was overriding the .textBox one. The html was:

<body onload="onLoadBody()" class="mmBack">
  /* the textBox divs in here, as stated in the question */
</body>

In case someone runs into the same thing....

Upvotes: 0

Jokey
Jokey

Reputation: 314

Try using just .textBox a instead of .textBox a:link

Upvotes: 1

Sean
Sean

Reputation: 6499

It's difficult to tell without seeing your HTML, but I suspect the following CSS will work:

.textBox{
  color: Orange;
  font-size: 17px;
  background: rgba(100, 200, 200, 0.7);
  }

.textBox:link, .textBox:visited{
  color: Blue;
  border: 1px solid Black;
  text-decoration: none;
  background: none;
  }

.textBox:hover, .textBox:active, .textBox:focus {
  background: rgba(0,0,0,0.5);
  color: Red;
  }

Like I said, it's difficult to tell without seeing your HTML, but your first style rule acts as if the textBox class is applying to the link itself, whereas subsequent rules only apply to children of the textBox class (I hope that makes sense)?

All I've done is remove the a tags in your css, if you apply the textBox class to a tags the above code should work.

EXAMPLE

Upvotes: 0

Related Questions