1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

A question on a particular CSS validator complaint

Discussion in 'CSS' started by tayiper, May 13, 2006.

0
  1. #1
    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
     
    tayiper, May 13, 2006 IP
  2. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    FeelLikeANut, May 13, 2006 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    kk5st, May 13, 2006 IP
  4. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #4
    Thanks you so much, I am now using "background-color: transparent;" ...


    tayiper
     
    tayiper, May 14, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    Just so you do understand the potential for color conflict as demonstrated in my example.

    cheers,

    gary
     
    kk5st, May 14, 2006 IP
  6. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #6
    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
     
    tayiper, May 14, 2006 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Without a whole potload of additional information, that's like asking 'how long is a string?'

    cheers,

    gary
     
    kk5st, May 14, 2006 IP
  8. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #8
    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
     
    tayiper, May 14, 2006 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    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
     
    kk5st, May 14, 2006 IP
  10. penagate

    penagate Guest

    Messages:
    277
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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
     
    penagate, May 15, 2006 IP
  11. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #11
    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
     
    tayiper, May 15, 2006 IP
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #12
    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
     
    kk5st, May 15, 2006 IP
  13. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #13
    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
     
    tayiper, May 26, 2006 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #14
    From sovasiti.

    cheers,

    gary
     
    kk5st, May 26, 2006 IP
  15. sencis

    sencis Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    there is a great validator tool http://www.htmlhelp.com/tools/csscheck/ - Web Design Group

    it can even validate all site (limit 100 pages)
     
    sencis, May 27, 2006 IP
  16. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #16
    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
     
    tayiper, May 27, 2006 IP