The CSS validator complains for my "style.css" file: "You have no color with your background-color : hr.line" (or rather complained, since I've fixed this) that for my hr selector there is no "color" (when I use the background-color property), however, if I add it, there is no effect (or at least I see none), since they seem to be the same thing, i.e. a "color" and a "background-color" properties in this particular case, only that "background-color" takes precedence (i.e. if I use both, and with different values, the "background-color" one is applied); so should I just set it to the same value ?? While it complains also for all a selectors (the text: "You have no background-color with your color : a") except one with "a:hover", which only has a background-color property, and I assume that is the reason for the complaints in the first place. tayiper
They are not the same thing. color is the property for the foreground-color. It is a general rule that if you set either the color or background-color then you should set both. It's to make sure you will always have contrasting, readable text.
Just so you do understand the potential for color conflict as demonstrated in my example. cheers, gary
OK, one more question. Why the "border-color" is not visible if I use the following code, is this because of that "color conflict" you've mentioned ?? hr.line { color: #ffffcc; background-color: transparent; border-color: #0000ff; width: 80%; height: 4px; } Code (markup): But why not even in this case (for instance) ?? hr.line { color: #ffffff; background-color: ffffcc; border-color: #0000ff; width: 80%; height: 4px; } Code (markup): P.S. -- And note that I've experimented with various different values; for starters with black and white colors, which are the most obvious. tayiper
Without a whole potload of additional information, that's like asking 'how long is a string?' cheers, gary
Ahhh, so apparently didn't understand it correctly. I thought not the parent of the element in a file/document (assuming like "div" or "table"), but parent in a "hr" element itself (which I somehow imagined it would be the "color" property) tayiper
The point of worrying about background colors on ancestors is that the bg color is seen through the elements by default. Save this code and view it in a modern browser. I didn't dumb down the demo enough for IE. Notice the background color is set on the body element, but shows through all. Change the background color on body to one of red, white, blue, green or black. Notice that either a text or a border becomes invisible, depending on the color. Do the same background color switch on each div. Note that it affects all descendents on which you haven't set a background. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } body { font: 100% verdana, sans-serif; color: black; background-color: #aaa; } div { margin: 1em; border: 3px solid black; } div:before { content: "the color is "attr(class); } .red { border-color: white; color: red; } .white { border-color: blue; color: white; } .blue { border-color: green; color: blue; } .green { border-color: black; color: green; } .black { border-color: red; color: black; } /*]]>*/ </style> </head> <body> <div class="red"> <div class="white"> <div class="blue"> <div class="green"> <div class="black"></div> </div> </div> </div> </div> </body> </html> Code (markup): cheers, gary
Hi, You can summate this issue with the W3C Validator quite clearly, it does not take into account property inheritance when it gives the warnings. So, most of them are irrelevant. - P
I've done that, thanks kk5st for the a nice example/comparison table. But again, I am still confused in regard to the second example above ... You see, if I DO understand why the "border-color" is not displayed in the first case/example above, i.e. the one with "inherit" or "transparent" values, since this means inheritation of the color from the parent element (see this post of mine in this thread), I DO NOT understand that for the second example where I specified the "border-color" property explicitly. Again, note that I've experimented with various different values; for starters with black and white colors, which are the most obvious, then with blue and read etc. etc. P.S. -- I guess that it's just that I don't understand something basic but crucial about this whole color-inheriting stuff !! tayiper
I wasn't really paying close enough attention to your particular problem, and was dealing entirely from the validator's point of view. Styling the hr element is a world unto itself. Each of the majors, IE, FF and Opera—and I don't know where Safari falls in this—have their own method of styling hr, and all are legit. Remember, I said the color/background-color thing was a warning and not an error? This is an excellant example. The validator will warn you about having indeterminate colors or same colors, and it is up to you to decide whether you're ok with what you have or not. I hope I've dealt with some of the confusion I may have caused. cheers, gary
OK, I've opened a thread with this question on WebDeveloper, and titled it I want to have "border-color" displayed with "hr" elements, and in it, user NogDog have me an answer, i.e. he suggested to me to use the following code: border: solid 1px #0000ff;. And after I applied this, now I have an observation to tell you about, i.e. it's that althought this works correctly in Internet Explorer (i.e. the "color" and "border" properties' values are both applied), it doesn't work in Firefox; meaning that nomather what hex-code I put for color property, it's always white. For instance consider this example (should be black, and it is in IE but not in FF): hr.line { color: #000000; background-color: transparent; border: solid 1px #0000ff; width: 80%; height: 4px; } Code (markup): thanks again, tayiper
there is a great validator tool http://www.htmlhelp.com/tools/csscheck/ - Web Design Group it can even validate all site (limit 100 pages)
Ahhh thanks "kk5st", that surely makes sense. So I could simply use the same hex-value for both ones. But what about the "transparent" or "inherit" part, i.e. it apparently doesn't apply as I thought it does ?? thanks again, tayiper