472,782 Members | 1,167 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,782 software developers and data experts.

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

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

Feb 7 '06 #1
2 2805

bissa...@yahoo.co.uk wrote:

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.
Warnings, not errors.
Why does it require that every CSS defined element have their
background-color defined?
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.
Also, when I set styles in the following way:

#div {
#div? Is 'div' really a useful unique identifer?
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?


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

Feb 7 '06 #2
<bi******@yahoo.co.uk> wrote in message
news:11**********************@g44g2000cwa.googlegr oups.com...
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?
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.
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?


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}
Feb 7 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Markus Mohr | last post by:
Hi, everyone, I have a special problem: For every monitor resolution in 200 pixel steps from 800 to 1600 pixels I have an image to be shown as centered background-image. Those images all...
4
by: Mimo Zus | last post by:
I'm hoping that someone can explain what's going on; better yet provide a workaround. I'm designing a centered CSS site based on a 550 pixel wide vertical background image. Onto this background...
11
by: Jürgen Hochwald | last post by:
Hi Maybe this is a simple question, but I don't know how to solve. Background: A weather station connected to the serial port sends data packets. This data packets are containing variables fom...
0
by: Jeb Hunter | last post by:
Well, how can I describe this succinctly? I have a page with DIVs that us background images to produce a border effect. It works perfectly well, but I want to make up (for now) 3 different...
3
by: KNDesign | last post by:
I've set a background image to repeat-y and at 100% height. It appears fine when I open the window, but when I resize to a smaller height so that I must scroll down to see the rest, the background...
10
by: Yevgen Muntyan | last post by:
Consider the following macro: #define ALLOCIT(Type) ((Type*) malloc (sizeof (Type))) The intent is to wrap raw memory allocation of N bytes into a macro which returns allocated chunk of memory...
4
by: cherub | last post by:
I am not a programmer but i am trying to run the following script i thought i figured out with a book, but i am getting an error. Here is what i need it to do: From Outlook 03 Custom Contact Form...
6
by: Rob | last post by:
Hello, I'm sure this has come up before. I have need for a collection of all elements/objects in an HTML document that have any kind of an attribute (HTML or CSS) that is making use of a URL to...
1
by: nicky77 | last post by:
Hi, I've created a nav bar using a background image for rollover effects. Everything works as I had hoped, however, for some reason it seems that an area of whitespace (the same size of the...
0
by: Adam L. | last post by:
Howdy all. Quick background ? Pascal/Delphi programmer writing a software program in Pascal, coding the same program in parallel, in C. This is my long overdue goal to learn the C language. ...
0
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
14
DJRhino1175
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
0
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: lllomh | last post by:
How does React native implement an English player?
0
by: Mushico | last post by:
How to calculate date of retirement from date of birth
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.