Color issue on button-style links with Webkit bowsers

[jludwig]

I've encountered a REALLY strange problem on webkit based browsers.

Even the Inspector says the color should be white, but it's displaying the text color as blue.

Any ideas? It doesn't seem to happen with every webkit browser, but it happens to me using Chromium and Luakit and my coworker using Chrome and Safari.

[edited by: alt131 at 10:29 pm (utc) on Jan 2, 2012]
[edit reason] Thread Tidy [/edit]

[alt131]

HI jludwig, and welcome to WebmasterWorld,

Are these links? If so, are you sure the issue is as limited as you say? And finally, does this arise when the page is first loaded, or after returning to the page after a link has been visited?

If the latter, check your css for a:visited rules.

[jludwig]

First, I'm sorry for the links. I tend to skip stickies these days thinking they all say pretty much the same stuff, so sometimes I end up looking like a silly goose (like now).

Here's a copy + paste of my code:

HTML:

<a href="/landing/get-started" class="green-btn" id="get-started-btn">Get Started Today!</a>

CSS:

a.green-btn:link {
color: #FFF !important;
}
css_3360ce6980e00b78520f3bbca3b02788.css:99
a:link {
color: #0A7DB9;
font-weight: bold;
text-decoration: none;
}
css_3360ce6980e00b78520f3bbca3b02788.css:100
.green-btn {
background-image: linear-gradient(-90deg,rgb(102,205,51) 30%,rgba(51,154,0,0.5));
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(30%,rgb(102,205,51)),color-stop(100%,rgba(51,154,0,0.5)));
background-image: -moz-linear-gradient(-90deg,rgb(102,205,51) 30%,rgba(51,154,0,0.5));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9966cd33',EndColorStr='#50339a00');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9966cd33',EndColorStr='#50339a00')";
background-color: rgb(51,154,0);
border: 2px solid rgb(43,129,0);
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: 2px 3px 4px rgba(51,51,51,0.75);
-moz-box-shadow: 2px 3px 4px rgba(51,51,51,0.75);
-webkit-box-shadow: 2px 3px 4px rgba(51,51,51,0.75);
color: #FFF;
display: inline-block;
font-size: 1.1em;
font-weight: bold;
margin: 1em 0;
padding: 15px 20px;
text-shadow: 1px 1px 3px rgb(0,0,0);
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
Inherited from p
css_3360ce6980e00b78520f3bbca3b02788.css:100
#featured-menu p {
font-size: 1.3em;
line-height: 1.3em;
}
Inherited from div#page
css_3360ce6980e00b78520f3bbca3b02788.css:99
#page {
font-size: 0.75em;
line-height: 1.333em;
}
Inherited from body.not-front.logged-in.page-landing.no-sidebars.admin.section-landing.admin-menu
css_3360ce6980e00b78520f3bbca3b02788.css:99
body, caption, th, td, input, textarea, select, option, legend, fieldset {
font-family: Tahoma,Verdana,Arial,Helvetica,"Bitstream Vera Sans",sans-serif;
}
css_3360ce6980e00b78520f3bbca3b02788.css:99
body {
font-size: 100%;
color: #595959;
}


Note that even the Inspector that comes with Chrome has all colors crossed out except the color: #FFF !important; and yet he color is still #0A7DB9;

I should have to do with :visited because I have tried debugging hat as well by basically copying and pasting the above but with :visited (and even :hovered) instead of :link and the result is the same. The people on the #css on freenode were as confused as I am.

[alt131]

Hi jludwig, apologies for asking if these were links - it is in the title, and thanks for the code.

Ok, I can't speak for other forums, but generally here we find even challenging issues are less about confusion, more about getting enough information to work through the possibilities and track down the source of the issue.

So, back to my questions - are you sure this is as random but also as limited as you say? You see, if limited to you and your co-worker, and limited to machines on which you have been testing the site, that could be because you and your co-worker are not clearing the cache between visits. That would mean the links are being treated as :visited and that would be one explanation for it only happening on a couple of machines being operated by you and your co-worker.

Second, that's one of the reasons I asked if this was visited or unvisited links. If it is only visited links then we are looking for a :visited rule - and there isn't one in the code provided. That means there is one elsewhere in your css, or the browser is applying the default. Unfortunately I can't immediately recall the default :visited colour for webkit.

That is what makes #0A7DB9 a key clue. Because there is no visited link colour specified that will either be the default, or is specified somewhere else in the css. ...and I mean somewhere else. While Inspector is really good (IMO), it isn't (if I am right in my speculation this is a :visited issue) showing the rule for visited links. So if this is a :visited issue, you need to find out if that colour is specified for an a:visited somewhere else in the css. As the code is using multiple css files, look through them all.

Finally, quickly test whether this is an inheritance or specificity issue by coding a very specific :visited rule that is sure to over-ride any other more general settings lurking in the code - and also over-ride the browser default. The HTML looks quiet heavily nested, so something like:
[parent] [parent] #get-started-btn:visited {colour red!important;}
Should do it.

However also note all the above operates on the basis this is a :visited issue and that only some of links are showing the undesired colour. If all links are the undesired colour and there is no :visited rule, then you are seeing the browser default and simply setting your preferred :visited colour should fix the issue.

[jludwig]

alt131,

I swear, I added a :visited rule before and it didn't fix it. I decided to try it once more and it worked!I

I'll have to pay it forward on the forums as a way to say thanks. In the mean time, thank you.