homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Color Problem-Trying to Understand Background Color vs Font Color
I'm a newbie so I hope I'm posting correctly
JanaP10




msg:4113712
 1:05 am on Apr 11, 2010 (gmt 0)

These are the 8 Warnings from W3C-CSS Validator:
14 a:hover 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.
19 Same colors for color and background-color in two contexts td.c3 and h1
19 Same colors for color and background-color in two contexts body and h1
19 h1 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.
27 body You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
28 body Redefinition of padding-top
41 td.c3 You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
60 table.c7 You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.

This is my CSS code:
<style type="text/css">
/*<![CDATA[*/
a:link {color: rgb(153,0,51);text-decoration: none;}
a:visited {color: rgb(153,0,51);text-decoration: none;}
a:active {color: rgb(153,0,51);text-decoration: none;}
a:hover {color: #000000;text-decoration: underline;}
h1 {margin: 0;color: rgb(153, 0, 51);font-style: normal;font-family: "Trebuchet MS", sans-serif, Arial;
font-size: 2em;}
body {margin:0;padding:0;background:rgb(153, 0, 1);padding-top:30px;padding-bottom:30px;font-style: normal;font-family:Tahoma, sans-serif, Arial;
font-size:1em;}
div.c1 {text-align: right;}
div.c2 {text-align: center;}
td.c3 {background: rgb(153, 0, 51);}
td.c4 {border-style: solid;border-width: 1px;
border-color: rgb(237, 216, 224);}
table.c5 {border-style: solid;border-width: 1px;
border-color: rgb(153, 0, 51);}
div.c6 {text-align: center;border-style: solid;
border-width: 0;border-color: rgb(237, 216, 224);}
table.c7 {background-color: rgb(237, 216, 224);}
/*]]>*/
</style>

These are the details of my Web page:
Web page background is red, all tables are pink, H1 (heading) is red, text is black, links are red except hover link is black and underlined. Table c7 is pink with no border and contains all other tables. Table c5 is pink with red border. Table c5 contains c3 (1st column with no border) which contains c2 (7 rows/navigation buttons/black text/red background). Table c5 contains c4 (2nd column with no border) which contains spacer image. Table c5 contains c4 (3rd column with no border)which contains heading red, text black, and image(s). Table c5 contains div 6 (3 rows with no borders).Div c1 contains image(s). Div c2 contains an image of a red line with no borders.

How do I resolve all the W3Cwarnings and specifically these two: (Line 19 states: Same colors for color and background-color in two contexts td.c3 and h1) (Line 19 states: Same colors for color and background-color in two contexts body and h1.)
I can't change h1 color as it must be red. I can't change body background color as it's the background color of the entire Web page and must be red. I can't change background color of td-c3 as the navigation buttons must be black text on red background. In addition, I would like the option to pick and choose which images have a border (usually those in div c1 and in c4 of table c5) but I would like the option for certain images not to have a border.

If it's best for me to post my HTML code (already validated), please advise. Thank you so much. I have been trying to resolve this for days.

 

encyclo




msg:4113722
 1:22 am on Apr 11, 2010 (gmt 0)

Welcome to WebmasterWorld JanaP10 :) It is important to distinguish an "error" from a "warning" when dealing with the validator. Errors should be fixed, but warnings are just that - they apply when the validator cannot make a definitive analysis. This is the case with color variations, the validator merely issues a warming so that you check manually.

Assuming that you "make sure that cascading of colors keeps the text reasonably legible", then you can safely ignore the warnings.

JanaP10




msg:4113747
 3:39 am on Apr 11, 2010 (gmt 0)

Thanks for the insight regarding "errors" and "warnings". I am a stickler for having everything correct so how do I fix my CSS style code to remove any warnings? Although pink is a lighter variation than red, the two are nothing alike and the black text on both colors is very legible. Thanks again for your help.

JanaP10




msg:4121733
 8:21 pm on Apr 25, 2010 (gmt 0)

An update in case anyone else like me would like to have their CSS style sheet validated without warnings. The key is to set both the background-color and color properties in every rule and use the term color:inherit or background-color:inherit. Depending upon the scope of a Web site, some might consider this to be a lot of extra work. I didn't and my CSS style sheet validates without errors or warnings.
Old Code
a:link {color:rgb(153,0,51); text-decoration:none;}
New Code
a:link {color:rgb(153,0,51); background-color:inherit; text-decoration:none;}
Old Code
body {margin:0; padding:0; background-color:rgb(153,0,51); font-style:normal; font-family:Tahoma, sans-serif, Arial;}
New Code
body {margin:0; padding:0; background-color:rgb(153,0,51); color:inherit; font-style:normal; font-family:Tahoma, sans-serif, Arial;}
My thanks to whoever posted that information but I can't remember where I found it (...might have been on another forum).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved