Menu
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:
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:
This is what they look like in Firefox - correct:
It looks like the user agent stylesheet is overwriting my style. Why?
257
You can override user agent stylesheet declarations with your author styles. And indeed, you do that every day when you write your CSS. Author styles override user styles, which override user agent styles.
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
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
