SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    CSS Color Overlapping

    Is it common to have a lot of these warnings in CSS validation results:
    You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.

    I get this error with this code
    h1,h2,h3{color:#9F9FFF;line-height:1.2}

    Do I really need to state a background color when the the <h>s look fine on the site and the background color for the whole main section that ises these <h>s is already set?


    Thanks,

    Chris

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yeah, I'm not so convinced by those warnings, but I assume it's to let you know that if the background color/image fails for any reason, the text won't be easily seen on the background color of the next element up the line. It's easy enough to set a bg color on those elements that matches the bg color of the container, so if the warnings bother you, it's easy to get rid of them.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ralph,
    I think I'll leave it.

    Thanks Ralph,

    Chris

  4. #4
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I wonder if it's better to have those benign errors causing those warnings. If you code for every background color for every tag, image etc. and one day there's a problem with one of these tags/images not showing, instead of seeing a black rectangle, you'll see the same color as the rest of the backround, making the "not showing" tag/image much less noticeable. That raises the question: which would you rather have, a black rectangle or a missing tag/image than might not be noticed for a while?

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    An opinion.

    Requiring a background-color whenever a text color is applied seems more like a "best practice". Failing to include a background-color does not cause css to malfunction. So, a "best practice" warning, perhaps, but hardly a css *error*, in my opinion. Will they ever "break" in a browser. Can't imagine it happening.

    I'm not aware of a requirement to give images a background-color. (Emphasis on "not aware". Is this an HTML5 expectation?) Missing images can easily disappear without a trace today. Depends on their {display} characteristic AND the browser.

    Personally, I tend to clean up all validation errors. In that way, significant errors catch my eye more easily and are not apt to be overlooked because of the company they keep. However, all are not "critical". Unmatched html tags, yes; various others including background colors, no.

    How many tags are you including in your question?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The first time I because aware of this issue was reading Zeldman's Designing with Web Standards book some years ago. I have to admit I haven't followed this practice much. But I can imagine a situation like this where it might matter:

    Say you have black text in your content area, and a white background image on that content area, but no background color set. And on the bosy element you have a background color of black. If for any reason the white background image on the content area were not to load (if you have images off, for example) you'd have black text on a black background. I assume that's the reason for the warning, but not sure, as I admit I've never gotten around to following up on this issue.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah that's why I think leaving those warnings in palce can be of use - the only way the black backgrounds can occur is when there's a more significant error.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •