updated topic: CSS link changes showing in Chrome but not Firefox

• 

  katharinebirkett · Member · May 4, 2015 at 3:11 pm

  • Copy link
  • Add topic to favorites

  For background, see the post “css link format change affected wrong links.”

  I’ve now got this in the CSS panel:

  div.entry-content a:link {
  color: #599FC1;
  text-decoration: none;
  border: none;
  }

  a:active {
  color: #9B959F;
  text-decoration: none;
  border: none;
  }

  The links are working in Chrome but not in Firefox, where now you can’t see the links at all, b/c the “border-none” did get rid of the underlining in my theme, but the custom link color didn’t “take.”

  Any thoughts? I’ve cleared my FF cache.

  The blog I need help with is: (visible only to logged in users)

• 

  katharinebirkett · Member · May 5, 2015 at 12:20 pm

  • Copy link

  Solution! Based on feedback from another forum, I tried changing “a: link” to just “a” and that made my link color change work in both FF and Chrome. I don’t know why it worked . . . but it worked beautifully. It’s puzzling, since here and online many suggested “a:link” and I’m sure with good reason. But for some struggling beginner, this, FWIW, fixed my problem.

  So that part of the code now reads:

  div.entry-content a {
      color: #2C60BA;
      text-decoration: none;
      border: none;
  }

  Eventually I figured out that in the next part of the code, for what I wanted to accomplish, I needed to change “active” to “hover.”

  So that now reads:

  div.entry-content a:hover{
      color: #3A93BC;
      text-decoration: none;
      border: none;
  }

  (Well, I’ve probably changed the colors, but that’s the code structure.)

  So now I have non-underlined links, in a custom color, that change color when someone pauses above them to see if they are links.

  Hope this helps someone else down the road.