I'm experiencing an issue with the CSS styling on one of my website pages. Here is the CSS code for formatting links:
a:link, a:visited, a:active {
color: white;
text-decoration: none;
font-weight: bold;
}
However, despite these styles, the links appear blue in Chrome and white in Firefox. When inspecting in Chrome dev tools, it seems that my styles are being overridden by the user agent stylesheet:
I attempted to set the charset at the beginning of the stylesheet like this:
@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;
}
However, this did not resolve the issue. The stylesheet is linked in the head using the following code:
<link href="/assets/global.css?body=1" media="screen" rel="stylesheet"
type="text/css">
Here is how the links are coded in the HTML:
<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>
The links appear incorrectly styled in Chrome (13.0.782) and correctly in Firefox.
It appears that the user agent stylesheet is taking precedence over my custom styles. Why might this be happening?