SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Validator Warnings

    Only one of my pages had warnings. What does this mean? Why should i or should i not be concerned? Thanks!

    URI : http://www.wingfling.org/testing/index.css
    24 Same colors for color and background-color in two contexts p#header-bottom and #center h3
    24 Same colors for color and background-color in two contexts #footer and #center h3
    24 Same colors for color and background-color in two contexts #right h3 and #center h3
    49 Same colors for color and background-color in two contexts p#header-bottom and .invitation
    49 Same colors for color and background-color in two contexts #right h3 and .invitation
    49 Same colors for color and background-color in two contexts #footer and .invitation

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, as far as I know warnings in css aren't that problematic in the first place, we just have to look at what's the warning for.

    For example:
    The css validator doesn't know that #center h3 won't ever be within #footer but #center h3 has the same color as the background-color of #footer. So, theoretically, if your div id=center was within the div id=footer, the user won't be able to read the text because the text as well as the background have the same color. So, that's the warning for.
    Dan G
    Marketing Strategist & Consultant

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These warnings were implemented a while ago, why I'll never know because the have nothing to do with the validity of the CSS file, they are accessibility recommendations.

    Personally I think they should yank these stupid warnings out and create an accessibility 'validator'

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They should leave them in. It forces people like me who are anal-retentive about writing error and warning free code to actually check our work.

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    They should leave them in. It forces people like me who are anal-retentive about writing error and warning free code to actually check our work.
    Yeah but come one ... most the warnings are so freaking stupid it's not funny. Like 20 or 30 elements that don't have a background color specified when there is a color set for the page ..... I'm sorry, I watch and practice accessibility but most of these warnings are garbage.

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dc dalton View Post
    ..... I'm sorry, I watch and practice accessibility but most of these warnings are garbage.
    Most but not all. Recently I forgot to set a background color as I had an image for the background. Then a friend casually switched off images and my menu disapeared - white text on a white background....
    An easy fix, yes, but you can miss this sort of thing. Especially if, as in my case, you have changed the text color at a later stage.

    I (usually) just look at the warnings and work out if they matter or not.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    There are TWO stylesheets that the browser applies to a web page. The one supplied with the page and the one attached to the browser itself.

    If you set a foreground colour in the CSS attached to your web page and don't set a background colour and I set a background colour in the CSS attached to my browser and don't set a foreground colour and we both cloose the same colour then the text will be the same colour as the background and will not be visible. You should always set both background and foreground colours on the same element to avoid the disappearing text problem.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wouldn't setting the background color on all element cause maintenance hell? I mean, if you ever change anything, you have dozens of other elements you have to change.

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you code the stylesheet properly you won't have that problem. Once I get my new computer, I'll finish writing the Minimum Markup mini-series I started over at Search-This.com .

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jacobpressures View Post
    Wouldn't setting the background color on all element cause maintenance hell? I mean, if you ever change anything, you have dozens of other elements you have to change.
    The rule is that if you set color you should also set background-color and vice versa.

    You don't need to set them on every entry, just those where you want to specify one or the other in the first place should specify both. That will not change how much work you need to do to change the colours since there will only be as many entries with colours on them as there needs to be anyway and if you change one colour you will probably need to change the second as well in any case.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought this whole concept of cascading style sheets and transparency was so that you don't have to set the background color for the parent element and the child element. The child automatically inherits the properties of the parent unless otherwise specified.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It does inherit the colours from the parent if they are not specified. The reason you need to always specify both colours is that you can only see one of the two stylesheets being applied and you have no idea what may be in your visitor's stylesheet that will override one of the colours if you don't specify both.

    If your stylesheet contains

    body {background-color:blue;}
    p {color:red;}

    and I visit your site and the stylesheet attached to my browser contains

    body {background-color: red !important;}

    then I just end up with a plain red page and can't see your text at all since my red background overrides your background.

    If instead you specify

    p {background-color:blue;color:red;}

    then even though I have changed the background of the page to red your paragraphs still have a blue background.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just so you know, you spelt colors wrong. But all your other words were spelled right. Use a spell checker next time.

    Thanks! I learned something. I appreciate that. Wonderful example also.

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Where did I spell colour wrong? I know the spellchecker keeps reporting color as being misspelt but that is because the CSS standards writers misspelt it and so you have to spell it wrong in your stylesheet for the browser to recognise it.

    I have a spellchecker turned on in the browser and it isn't reporting any misspelt words as I type. I am tying in English - maybe you are using a foreign language such as American.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LoL!

    Thanks!

  16. #16
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •