Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
|
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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old December 23rd, 2006, 12:22 PM
Friend of Wrox
 
Join Date: Aug 2003
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS Backgound / Color warnings


I wondered if someone could advise me on CSS warnings. Although my CSS is valid - the W3C validator states 40 warnings regarding the misuse of background-color and color.

I wondering if someone could advised me where I'm going wrong! To whether I'm over using the background-color and color styles

Code:
body {
    text-align:center;
    margin:0;
    font-size:100%; 
    font-family: "Lucida Grande", Arial, sans-serif; color:#999; background-color:#fff;
    }

#wrapper {
        width:780px;
        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; }

a#pageon { text-decoration:underline; color:#f60; }


/* 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; }
div#cartlinks img { vertical-align:middle; padding:0px 4px; }

/* Start of TAB navigation using backgound images */

ul { margin:0; padding:0; list-style: none; width:780px; }

ul li { float:left; background: url("tab-right.gif") no-repeat top right; white-space:nowrap; }

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; 
    }


/* Start of search bar */

#search_bar { background-color:#69c; height:30px; text-align:right; clear:both; padding: 5px 0 0 0;}
#about_links { float:left; width:490px; 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; }

#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:464px; text-align:left; vertical-align:top; }
#banner_left {float:right; width:130px; vertical-align:bottom; clear:right; text-align:right; }
div#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:780px; }
#left_col { width:180px; float:left;}
#content_col { width:600px; 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:470px; 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 */

div#footer_links { width:780px; font-size:0.7em; background-color:#EFEFEF; height:auto; text-align:center; margin-top:15px; }
div#footer_links a { text-decoration:none; }
div#footer_links a:hover, div#footer a:hover { text-decoration:underline; }
div#search_bar_foot { background-color:#69c; margin:0; height:auto; clear:both;text-align:right; padding: 5px 0 0 0; }
div#search_check_links { background-color:#69c; height:35px; float:left; width:490px; text-align:right; color:#fff; font-size:0.9em; }

form#search_foot_frm { background-color:#69c; height:35px; float:right; width:300px; padding-right:10px; margin:0;  }

div#search_check_links a { color:#fff;}

div#search_check_links img { vertical-align:middle; padding:0px 2px; }

form#search_foot_frm input#search_foot_text { border: 1px solid #f60; }
form#search_foot_frm input#foot_search_button { border: 1px solid #666; background-color:#ccc; color:#666; font-size:10pt; }

div#footer { text-align:center; clear:both; }

/* 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
 
Old January 3rd, 2007, 02:04 PM
Authorized User
 
Join Date: May 2006
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to kaos_frack
Default

what do the errors say?

 
Old January 4th, 2007, 08:13 AM
Friend of Wrox
 
Join Date: Aug 2003
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

My warnings:

Code:
Same colors for color and background-color in two contexts div#footer and #nav li a:hover
1        Same colors for color and background-color in two contexts #left_col div a:hover and #nav li a:hover
1    #footer_links    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts div#footer and #nav li a:hover
1        Same colors for color and background-color in two contexts body and div#footer a
1        Same colors for color and background-color in two contexts #left_col div h4 and #nav li a:hover
1    #search_bar    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts #search_bar and h1
1        Same colors for color and background-color in two contexts #search_bar and a
1        Same colors for color and background-color in two contexts #search_bar_foot and h1
1        Same colors for color and background-color in two contexts #search_check_links and a
1        Same colors for color and background-color in two contexts #search_check_links and h1
1    #nav li    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts #search_foot_frm and h1
1        Same colors for color and background-color in two contexts body and div#footer a
1        Same colors for color and background-color in two contexts body and #about_links a
1        Same colors for color and background-color in two contexts #search_bar and form#mail_frm input#email_text
1        Same colors for color and background-color in two contexts #left_col div and #about_links a
1        Same colors for color and background-color in two contexts #search_check_links and form#mail_frm input#email_text
1        Same colors for color and background-color in two contexts #search_bar and #main_right p
1    #banner_content    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts #search_bar_foot and #main_right p
1    #left_col p    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts #search_check_links and #main_right p
1        Same colors for color and background-color in two contexts #search_bar_foot and #cartlinks
1        Same colors for color and background-color in two contexts #search_foot_frm and #main_right p
1        Same colors for color and background-color in two contexts #search_foot_frm and #cartlinks
1    #main_right p    This property applies to block-level elements.
1    #wrapper    This property applies to block-level elements.
1    #search_bar_foot    This property applies to block-level elements.
1    #banner_left    This property applies to block-level elements.
1    #search_check_links    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts #left_col div and div#footer a
1        Same colors for color and background-color in two contexts div#footer and #nav li a#pageon
1        Same colors for color and background-color in two contexts #search_bar_foot and a
1        Same colors for color and background-color in two contexts #left_col div a:hover and #nav li a#pageon
1    #main_left div.container div    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts div#footer and #nav li a#pageon
1        Same colors for color and background-color in two contexts #search_bar_foot and form#mail_frm input#email_text
1        Same colors for color and background-color in two contexts #left_col div h4 and #nav li a#pageon
1    body    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts div#footer and a:hover
1        Same colors for color and background-color in two contexts #search_check_links and #cartlinks
1        Same colors for color and background-color in two contexts #left_col div a:hover and a:hover
1    #left_col div h4    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts div#footer and a:hover
1    #footer    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts #left_col div h4 and a:hover
1        Same colors for color and background-color in two contexts #left_col div and div#footer a
1        Same colors for color and background-color in two contexts body and #search_check_links a
1        Same colors for color and background-color in two contexts #search_bar and #cartlinks
1        Same colors for color and background-color in two contexts #left_col div and #search_check_links a
1    #about_links    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts div#footer and #main_right strong
1        Same colors for color and background-color in two contexts #search_foot_frm and form#mail_frm input#email_text
1        Same colors for color and background-color in two contexts #left_col div a:hover and #main_right strong
1        Same colors for color and background-color in two contexts #search_foot_frm and a
1        Same colors for color and background-color in two contexts div#footer and #main_right strong
1    #cartlinks    This property applies to block-level elements.
1        Same colors for color and background-color in two contexts #left_col div h4 and #main_right strong
Gaz
 
Old January 4th, 2007, 08:15 AM
Friend of Wrox
 
Join Date: Aug 2003
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

The problem I have is that the site is an e-commerce site - which uses template software, and somtimes the CSS had to reference in a certain way due to how the page is constructed. However, the This property applies to block-level elements is a warning I havent come across before until now. I would welcome your advisement?


Gaz





Similar Threads
Thread Thread Starter Forum Replies Last Post
Change background color using CSS pigtail Javascript How-To 9 April 4th, 2010 11:13 AM
how to set the backgound-color dynamically Neha XSLT 7 July 10th, 2008 07:17 AM
CSS Color Codes bruceaj CSS Cascading Style Sheets 8 October 11th, 2007 03:11 AM
CSS Warnings - OK ignore? or best warning free? socoolbrewster CSS Cascading Style Sheets 2 February 12th, 2007 12:45 PM





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