Chrome user agent stylesheet overwriting my site style

25
votes

I have the following CSS that styles the link on one of my pages:

a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

However, when I load it, they appear blue in Chrome and white in Firefox. The Chrome dev tools reveal that my style supposedly overwrites the user agent stylesheet:

enter image description here

Why is it not showing correctly? I tried setting the charset at the top of my stylesheet:

@charset "UTF-8";

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font: 11px "Lucida Grande", Arial, Sans-serif;
}

a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

input[type=email], input[type=password] {
    display: block;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ACE;
    font-size: 13px;
    margin: 0 0 5px;
    padding: 5px;
    width: 203px;
}

But it didn't help. My stylesheet is linked in the head with:

<link href="/assets/global.css?body=1" media="screen" rel="stylesheet"
type="text/css">

And the html code for the links:

<a href="/users/sign_in">Sign in</a>
<a href="/users/password/new">Forgot your password?</a>
<a href="/users/auth/facebook">Sign in with Facebook</a>

This is what they look like in Chrome (13.0.782) - incorrect:

enter image description here

This is what they look like in Firefox - correct:

enter image description here

It looks like the user agent stylesheet is overwriting my style. Why?

7
htmlruby-on-railscssgoogle-chromeweb
It is not. Describe your problem more specific. Which style does not apply? What is html code of incorrect styled elements. – NiematojakTomasz
The links are supposed to appear white in Chrome. They appear correctly in Firefox. – TK Gospodinov
Works perfect on my desktop - chrome 13.0.782.220 m. And according to i.stack.imgur.com/FlIjd.jpg color of selected link is white. – NiematojakTomasz
Correct, it is supposed to be white, but shows up as blue, as pictured in i.stack.imgur.com/qlHa0.jpg on my Chrome instance. – TK Gospodinov

7 Answers

11
votes

I don't know why but I add this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> before <html> and it solved

7
votes

Vonkly helped identify the issue. I went digging through all my stylesheets and I found a typo, sort of, in one of them - it was missing the parent element when defining the link style for the header, so instead of

header a:link, header a:visited {
...
}

I had

header a:link, a:visited {
...
}

so it was overriding the style I defined for the links in the body. I must have missed it while reviewing my stylesheets the first time around.

Thanks for your comments, everybody!

5
votes

Just add <!DOCTYPE html> before the <html> tag.

2
votes

I was having same kind of problem, i my case my some classes are forcefully settled to display : none

After 30/40 min i looked up on browser extensions , and found out all these was happening due to AD Blocker.

so if any above solution does'nt work for you, then try this as well once if you have this kind of browser extension.

1
votes

The user agent stylesheet only kicks in if your css neglects to define a property for a tag. Consider that you might have a typo in your css style.

Chances are that, if you put the tag declaration at the beginning of the css file and it works, that you have an error in your css.

Try running your css thru CSS Lint

I had this persistent problem and discovered a mistake in my css.

0
votes

Force your margin before the browser sets it for you

 body {
 margin: 0%;
  }
-1
votes

Use the general css anchor style a:

a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

Also, you don't need to set the charset in your css file. I would remove that.

The charset should be set in the HTTP header, which is where it belongs.