Hi
I have validated my CSS, which I'm using for an e-commerce site I have been developing. The CSS validates, but I have over 86 warnings! Which relate to my use of background-color and color attributes.
"Same colors for color and background-color in two contexts table th and a"
The site I'm developing uses templates and some of CSS is used on a section of code. Which is why some of the CSS might be repeating it's self in place. However, I'd prefer to get rid of the warning if possible. Can anyone advise me how I could resolve the warnings?
The CSS is as follows:
Code:
body {
text-align:center;
margin:0;
font-size:100%;
font-family: "Lucida Grande", Arial, sans-serif; color:#999; background-color:#fff;
}
#wrapper {
width:790px;
margin: 0 auto;
text-align:left;
padding:0 7px;
border-right: 2px solid #f60;
border-left: 2px solid #f60;
border-bottom:2px solid #f60;
}
a { color:#69C; }
a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:hover { text-decoration:underline; color:#f60; }
a:active {text-decoration:none; }
/* Start of branding section */
#sitelogo { float:left; width:250px; }
#sitelogo img { margin-bottom:10px; }
#cartlinks { font-size:0.9em; float:right; text-align:right; color:#69C; width:400px; }
#cartlinks img { vertical-align:middle; padding:0px 4px; }
/* Start of TAB navigation using backgound images for UL tag */
#nav { margin:0; padding:0; list-style: none; width:790px; }
#nav li { float:left; background: url("tab-right.gif") no-repeat top right; white-space:nowrap; }
#nav li a { display:block; padding: 0 0.4em;
background: url("tab-left.gif") no-repeat top left;
text-decoration:none;
color:#666; font-size:0.66em; line-height:2.5em;
}
#nav li a:hover { text-decoration:underline; color:#f60; }
#nav li a#pageon { text-decoration:underline; color:#f60; }
/* Start of search bar */
#search_bar { background-color:#69c; width:790px; height:30px; text-align:right; clear:both; padding: 5px 0 0 0;}
#about_links { float:left; width:300px; text-align:left; vertical-align:middle; }
#about_links a { color:#fff; text-decoration:underline; font-size: 0.7em; padding: 0 3px; }
#about_links a:hover { text-decoration:none;}
form.simplesearch { float:right; width:300px; padding-right:10px; margin:0; }
form.simplesearch input.SS { border: 1px solid #f60; }
form.simplesearch input.search_button { border: 1px solid #666; background-color:#ccc; color:#666; font-size:10pt; }
/* Start of breadcrumb */
#bread_crumb, div#footer { background: url("orange_spacer_shadow.jpg") repeat-x; height:24px;
background-color:#f60; color:#fff; font-size: 0.7em; width:790px; }
#bread_crumb a, div#footer a { color:#fff; text-decoration:none; }
#bread_crumb a:hover, div#footer a:hover { text-decoration:underline; }
/* Start of banner section */
#banner_right {float:left; width:186px;}
#banner_content {float:left; width:489px; text-align:left; vertical-align:top; }
#banner_left {float:right; width:115px; vertical-align:bottom; clear:right; text-align:right; }
#banner_content p { font-size:0.7em; padding:2px 0; margin:0; font-weight:100; }
h1 { color:#69c; font-size:1.60em; margin:0; font-weight:bold; }
/* Main content area */
#main_content { width:790px; margin-top:4px; }
#left_col { width:180px; float:left;}
#content_col { width:610px; float:right; }
/* left col content style */
#left_col div { width:170px; background-color:#fff; padding:2px; border:1px solid #f60; margin-bottom:4px; }
#left_col div a { display:block; text-decoration:none; font-size:0.8em; padding:2px; color:#69c; background-color:#EFEFEF; border:1px solid #fff;}
#left_col div a:hover { color:#fff; background-color:#f60; text-decoration:none;}
#left_col p { text-align:center; }
#left_col p a { font-size:0.7em; }
#left_col p a img { vertical-align:middle; }
#left_col div h4 { background-color:#f60; color:#fff; text-align:center; font-size:0.9em; margin:0;}
form#mail_frm { color:#69c; font-size:0.7em; margin:1px; background-color:#EFEFEF; margin:0; }
form#mail_frm input#email_text { border: 1px solid #f60; color:#69c; margin:3px 0; }
form#mail_frm input#submit_button { border: 1px solid #666; background-color:#ccc; color:#666; font-size:10pt; }
/* Right col content divided into 2 cols */
#main_right { width:126px; float:right; }
#main_left { width:480px; float:left;}
/* main_right col content */
#main_right p { width:125px; margin:5px 0 5px 0; text-align:center; color:#69c; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:800; font-style:italic; font-size:0.6em; }
#main_right strong { color:#f60; }
#main_right img { display:block; }
/* main left col content */
#main_left div.container { width:450px; }
#main_left div.container div { width:140px; float:left; padding: 0 5px 0 5px; text-align:left; }
#main_left div.container div h4 { margin:0; padding:0; font-size:0.8em; }
#main_left div.container div h4 a { text-decoration:none; }
/* Footer links div */
#footer_links { width:790px; font-size:0.7em; background-color:#EFEFEF; height:auto; text-align:center; margin-top:15px; }
#footer_links a { text-decoration:none; }
#footer_links a:hover, div#footer a:hover { text-decoration:underline; }
#search_bar_foot { width:790px; background-color:#69c; margin:0; height:auto; clear:both;text-align:right; padding: 5px 0 0 0; }
#search_check_links { background-color:#69c; height:35px; float:left; width:390px; text-align:left; color:#fff; font-size:0.9em; }
#search_foot_frm { background-color:#69c; height:35px; float:right; width:300px; padding-right:10px; margin:0; }
#search_check_links a { color:#fff;}
#search_check_links img { vertical-align:middle; padding:0px 2px; }
#search_foot_frm input#search_foot_text { border: 1px solid #f60; }
#search_foot_frm input#foot_search_button { border: 1px solid #666; background-color:#ccc; color:#666; font-size:10pt; }
#footer { text-align:center; clear:both; }
/* Start of shopping cart and product/section line layout */
table.section_line, table td#maincontent table.product_line { border: 1px solid #69c; padding: 2px 2px 5px 2px; }
table.section_line h3, table td#maincontent table.product_line h3 { background-color:#69C; color:#fff; margin:0 0 5px 0; text-align:center; }
table.section_line a, table td#maincontent table.product_line a { background-color:#f60; color:#fff; font-weight:bold; padding:0 15px; font-size:0.8em; text-decoration:none; }
table.product_line td.infolink a { background-color:#fff; }
table.section_line p, table td#maincontent table.product_line p { font-size:0.8em; }
table.section_line img, table td#maincontent table.product_line img { margin: 0 0 0 5px; }
table.product_line td strong { color:#000; font-size:1.2em; }
fieldset { padding:5px; border:1px solid #69c; }
legend { background-color:#fff; color:#f60; padding:5px; font-weight:bold; }
table #protx_tab td p { text-align:left; }
table #invoice_details td { background-color:#EFEFEF; color:#999;}
table #invoice_details td input { border: 1px solid #69c; color:#000; }
table th { background-color:#69c; color:#fff; }
table #cart_header td { background-color:#EFEFEF; color:#999; }
table #cart_header td.nobgcol { background-color:#fff; }
table #cart_header td#cart_total { background-color:#f60; color:#fff; font-weight:bold; }
table #cart_discount td { background-color:#EFEFEF; color:#999; }
table #invoice_details td, table#terms_conditions td { text-align:left; }
.required_text { color:#f00; }
/* Start of div clearing IE bug */
.fixclear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
* html .fixclear { height:1%;}
.fixclear { display:block; }
Gaz
CSS Warnings - OK ignore? or best warning free?
