Fixing CSS style sheet warning is much more fun than fixing broken CSS. The latest warning that I played around are:
You have no background-color with your colorYou have no color with your background-colorSame colors for background-color and color
Take note even the style sheet has warning; according to the CSS validator it is still a valid CSS. Even though it’s still validates but in a professional point of view it really bothers a lot, especially when this issue is involving client website.
Why does the validator complaining?
This new set of validation rules has been added by the W3C somewhere back in September. According to the W3C CSS validator FAQ,
If you don’t specify
colorandbackground-colorat the same level of specifity, your style sheet might clash with user style sheets.To avoid this, specify always both of them, see Section 9.1 “Color Contrast” in the W3C Note “CSS Techniques for Web Content Accessibility Guidelines 1.0” or the article CSS Color Issues by the CSS Pointers Group for a discussion.
So, your choices are:
- Rewrite the CSS style sheet by adding the missing property. Both background-color and color should be present inside the selector if either one of the property is being used.
selector { background-color: value; color: value; } - For God’s sake, it’s just a warning. Ignore those warning and pretend like it doesn’t happen.
But it’s really PITA that you probably have to rewrite and restructured almost 1/3 of your style sheet to fix those warning. Especially if most of your style sheet selectors already have either color or background color. At first, you’ll probably think that by adding the missing property would increase the size of your style sheet. But you’re wrong.
During the process of fixing those warning, you’ll probably encounter other kind of warning for example:
Same colors for color and background-color in two contexts
You have no choice other than choosing another color or grouping the selectors which using the same property and value.
In the end, you’ll find that each background-color or color assign to the selector have their own value and remember if you specify one color, you must specify them all. There’s a 90% chances you’ll also end up finding that your overall layout color scheme would also has been changed unintentionally.
fucking complicated
Doesn’t specifying ‘color: inhert;’ or ‘background-color: inherit;’ wherever it complains fix this, or is there some complexity here that I’m missing?
What annoys me is that if you have some text over a background image you don’t want to specify a background color for the text. If you do it will ruin the look of the image.
Is there any way around that? I can’t find one… Particularly with links.
“During the process of fixing those warning, you’ll probably encounter other kind of warning for example:
* Same colors for color and background-color in two contexts
You have no choice other than choosing another color or grouping the selectors which using the same property and value.”
I find that going through and specifying background colors and colors for each element gets rid of those. Just so long as everything that needs it has both a background color and a color you won’t get any of those except for where it might be true. If you specify #000 for background-color and color then it would make sense to see that error.
I hate the CSS validator. It’s such a bitch to please sometimes…
I’m not sure what are you talking about, but I’m facing similar problem. This my first time developing tableless website and facing this situation. Shall I leave these kind of errors unvalidated? My design don’t have any problem with monochrome display anyway.
As stated, a warning does not mean your CSS is invalid. Warnings serve to remind you of a potential problem, not an actual problem. For the most part you can and should simply ignore warnings of no background-color on anchored links and the like, because very few people will experience any issues with it, and the ones that do are probably used to it by now. The important thing is that there are no errors in your CSS.
Using the “inherit” value is an option, but it can sometimes give unpredictable or unwanted results. I recommend the axiom “if it’s not broke, don’t fix it.” How many times I could have avoided a huge headache by following that rule!
Also keep in mind that users who employ their own stylesheets are in fact going against the “standard,” if by standard we mean what most people do, so unless you are designing specifically for these users, let them worry about it themselves. Letting them figure it out is better for them anyway, since the majority of sites out there will require them to do it… after all isn’t this the purpose of a user defining his or her own stylesheet?
I found if you use the inherit value for when you want the background to be transparent it will work just fine and give no warnings. It seems this is because it is falling back on the inherit value anyway so you are saving the browser a step:
background-color: inherit;
yeah, thats right.
background-color:inherit;
solves the problem.
Thanks for help.
if you have:
“background-color: fff;”
just add as well as
“color: inherit;”
pain in the arse though.
– g
Simple explanation of the issue and the “fix” works just fine.
Cheers.
hell yeah, what a pain in the a$$.
ok tks for help
* Same colors for color and background-color in two contexts
^^ can usually be solved by setting the following on the elements in question:-
background-color: transparent;
Thanks… I got it now.
I am so glad I found this page and all the answers to my questions about “Same colors for color and background-color”
I have recently completed a website, http://quilts-n-things.com/ and I kept getting the “backgroud-color…” warning when using “color:…” within my CSS. Here is the cure:
{
text-align: center;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: #808080;
background-color: inherit;
}
It took a good deal of toying with the code but, I have tested it with IE 7, MSN 6, Slimbrowser 4.10, Netscape 8.1, Firefox 1.8, Avant 11.6 and Opera 9.50.
I don’t know if the order you place the background property matters or not. My point is, it works and it satisfies W3C’s requirements for CSS levels 2.1 and 3.0
Don’t look at my site for coding samples yet! It’s still a mess. I’m reworking it. Just taking care of the paying customers first. ;-)
Truly it is exceptionally pointless. If you have an image as your background in a containing div which you want to “shine through” you are basically stuffed, as far as I can see.
More importantly my biggest paranoia is that this is the system that Google uses to verify white hat v black hat. If so you have a choice design what you want for maximum readability, accessibility and style… Or satisfy Google.
Short answer (to get rid of those warnings):
background-color: inherit;
Longer answer:
Thanks for Google, found this site and as the result found out that the background-color: inherit; did cleared all the 200 warnings indeed! Not that it makes much difference, but I like to keep my room nice and tidy. In case someone ever visits in…