a:link proble

[dhawkinson]

I am building a personal website. On my contact page I have a list of links for contacting me. They are telephone, email Linkedin, etc. The default blue associated with links does not contrast enough with the background on the page.

CSS-Tricks turned me on the a solution that involves the use of an a:link selector. It works great on the first two li items but doesn’t touch the final 4. I can find no reason in my code (though I’m sure there is one) that would explain the behavior.

[MOD EDIT – Codedump removed]

Help is much appreciated

[Paulie_D]

Please make a Codepen.io demo rather than dumping a load of badly formatted code on us.

Help us help you.

[dhawkinson]

Oops:

I forgot to include the codepen link. Thanks for pointing that out Paulie_D.

http://codepen.io/dhawkinson/pen/eJyMLV

[Paulie_D]

Ok…but does the Codepen demo the problem…it doesn’t look like it?

[dhawkinson]

@Paulie_D:

Yes if you look at the first two items in the list, they are a very dark blue, almost black. The next four are the standard default blue for links. It is a bit on the subtle side but it is visible.

Doug

[Atelierbram]

@dhawkinson Do you have some user specific styles defined in your browser? Have you tried different browsers?

The next four are the standard default blue for links.

Checked this in DevTools to be absolutely sure, but they’re all the same #212121 value that is set on .secondary a:link.

Related to the color calibration of the monitor/screen maybe? Can try making the page scroll (by adding ‘lorem ipsum’ or something), and scrolling up and down to see weather it’s a certain spot on the screen where the colors are off.

[dhawkinson]

And the correct answer is:

.secondary a:link should be .secondary a:link, .secondary a:visited {

[dhawkinson]

And the correct answer is:

.secondary a:link should be .secondary a:link, .secondary a;visited {

[Atelierbram]

Have been browsing with history turned off for ever (like many webdevelopers do; in order to keep some sanity). For this reason we are seeing different things when looking at visited links styled in the way you described.

To be honest, for me this is a non-issue, since I don’t style a:link separately at all, and also omit styling visited links: just let them inherit from the a link-styles. Helps with specificity too. Something like this:

a {
  text-decoration: none;
  color: crimson;
}
a:hover,
a:active {
  text-decoration: underline;
  color: darkred;
}

[Author]

Posts