Connecting Tech Pros Worldwide Forums | Help | Site Map

Why is it important that I define background-color for validated CSS

bissatch@yahoo.co.uk
Guest
 
Posts: n/a
#1: Feb 7 '06
Hi,

I am running a w3c CSS validation check on a site in development. I
have many errors saying that my CSS is not valid because I have not
defined the background-color but instead left it default transparent.
Why does it require that every CSS defined element have their
background-color defined?

Also, when I set styles in the following way:

#div {
background: #FFF url('images/bg.gif');
}

....it still gives me an error saying that I havent defined
background-color. Is the above an invalid way of writting it?

Thanks

Burnsy

Steve Pugh
Guest
 
Posts: n/a
#2: Feb 7 '06

re: Why is it important that I define background-color for validated CSS



bissa...@yahoo.co.uk wrote:[color=blue]
>
> I am running a w3c CSS validation check on a site in development. I
> have many errors saying that my CSS is not valid because I have not
> defined the background-color but instead left it default transparent.[/color]

Warnings, not errors.
[color=blue]
> Why does it require that every CSS defined element have their
> background-color defined?[/color]

Imagine the following author stylesheet:

body {color: black; background: white}
p {color: blue; background: transparent;}

and the user stylesheet
body {color: white !important; background: black !important;}

In that case the paragraphs will have blue text on a black background
(yuck). If the author had specifed
p {color: blue; background: white;}
then it would be okay.

Now, this is a problem when background images are used as due to tiling
you don't want to respecify them for every element.

In general, few people use user stylesheets and those that do are
usually savvy enough to write them carefully (e.g. liberal use of the
universal selector * helps) and use browsers or browser extensions that
let them toggle either the author or user css off entirely when
problems crop up.

So this is an issue that you should be aware of and which you should
think about, but it is only a warning not an error, so consider
yourself warned and if you want to carry on regardless, do so.
[color=blue]
> Also, when I set styles in the following way:
>
> #div {[/color]

#div? Is 'div' really a useful unique identifer?
[color=blue]
> background: #FFF url('images/bg.gif');
> }
>
> ...it still gives me an error saying that I havent defined
> background-color. Is the above an invalid way of writting it?[/color]

I can't reproduce that error/warning with my stylesheet that contains
the line
body { background: #91C4D9 url("bg-blue.gif") fixed; color: #000;}
Can you post the URL of your stylesheet so other people can validate
it?

Steve

Danny@Kendal
Guest
 
Posts: n/a
#3: Feb 7 '06

re: Why is it important that I define background-color for validated CSS


<bissatch@yahoo.co.uk> wrote in message
news:1139313719.799316.116200@g44g2000cwa.googlegr oups.com...[color=blue]
> Hi,
>
> I am running a w3c CSS validation check on a site in development. I
> have many errors saying that my CSS is not valid because I have not
> defined the background-color but instead left it default transparent.
> Why does it require that every CSS defined element have their
> background-color defined?[/color]

If you set one colour then set them all. If you don't then it isn't a
validation error, just bad practice.

If my browser was set to display white text on a black background and I
visited a site where the text was set to black and the background colour
hadn't been set then the page would be black text on a black background.
[color=blue]
> Also, when I set styles in the following way:
>
> #div {
> background: #FFF url('images/bg.gif');
> }
>
> ...it still gives me an error saying that I havent defined
> background-color. Is the above an invalid way of writting it?[/color]

If I feed your CSS snippet through the W3C CSS validator then it comes up
with this message: "Line : 1 (Level : 1) You have no color with your
background-color : #div"

The background colour *has* been set but you haven't set any foreground
colour.
eg: #div {background: #FFF url('images/bg.gif'); color:#000000}


Closed Thread