Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old February 8th, 2007, 11:06 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS Warnings - OK ignore? or best warning free?

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
__________________
Gaz
Reply With Quote
  #2 (permalink)  
Old February 11th, 2007, 08:35 PM
Friend of Wrox
Points: 1,515, Level: 15
Points: 1,515, Level: 15 Points: 1,515, Level: 15 Points: 1,515, Level: 15
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2003
Location: Oxford, , United Kingdom.
Posts: 488
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Yeh, it'll do that. You have my sympathies. Here's what it says in the validator FAQ:

If you don't specify color and background-color at the same level of specificity, your style sheet might clash with user style sheets. To avoid this, specify always both of them, see Section 9.1 "Color Contrast" in the W3C Note "CSS Techniques for Web Content Accessibility Guidelines 1.0" or the article CSS Color Issues by the CSS Pointers Group for a discussion.

ref: http://www.websitedev.de/css/validator-faq#color

There's a slightly less terse explanation here:
http://www.456bereastreet.com/archiv...re_not_errors/


HTH
Charlie

--
Charlie Harvey's website - linux, perl, java, anarchism and punk rock: http://charlieharvey.org.uk
Reply With Quote
  #3 (permalink)  
Old February 12th, 2007, 12:45 PM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for your advise. So basically, when you apply a COLOR always apply BACKGROUND too or vise versa

Gaz
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Warning: CSS show stopper jimibt BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 3 April 5th, 2007 03:39 PM
CSS Backgound / Color warnings socoolbrewster CSS Cascading Style Sheets 3 January 4th, 2007 08:15 AM
FREE JAVA GUIDE- free Java, j2ee, sql and plsql tu hemanthjava Java Basics 0 April 1st, 2006 09:34 AM
Set Warnings Teqlump Access VBA 4 October 27th, 2004 11:12 PM
Help Sesssion Warnings! Empier4552 Beginning PHP 1 July 8th, 2003 11:49 AM



All times are GMT -4. The time now is 06:08 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.