Newbie at CSS.

Just tried validating my css from W3C and it gave an error saying that the background color of my footer div was the same as color for my left div, H3.

So?

I want my footer background to be dark blue, and I want my H3 heading in my left column div to be blue. Why is the validator having a problem with this?

There were similar errors. I have a wrapper div containing the whole site that I want the background color to be white. However my header div is a background color of blue, and I have a home and contact links in the header that I want the A:link to be white. The validator had a problem with my wrapper div being white and my A:link being white in the header.

As a newbie, I'm sure I'm doing something very wrong, but what is it?

can you give us a link or post the code? That sounds like a strange error to me.

Thanks - following is the code:

body {
color: #191919;
background-color: #e6e6e6;
margin: 0px;
padding: 0px;
border-style: none;
font-family: sans-serif;
font-size: small;
line-height: 1.4em;
text-align: justify;
 }
 
a:link {color: #333333;
text-decoration: none;
 }
 
a:hover {color: #000080;
 }
 
h1 {color: #000080;
font-family: sans-serif;
font-size: 1.5em;
text-align: left;
font-weight: bold;
 }
 
h2 {color: #000080;
font-family: sans-serif;
font-size: 1.4em;
text-align: left;
font-weight: normal;
 }
 
h3 {color: #008040;
font-family: sans-serif;
font-size: 1.3em;
text-align: left;
font-weight: bold;
 }
 
h4 {color: #008040;
font-family: sans-serif;
font-size: 1.2em;
text-align: left;
font-weight: bold;
 }
 
h5 {color: #008040;
font-family: sans-serif;
font-size: 1.1em;
text-align: left;
font-weight: normal;
 }
 
#wrapper {
width : 800px;
border:#666666 thin solid;
margin : 15px auto 0 auto;
padding : 0;
background-color:#FFFFFF;
 }
 
 
#logo {
	background-color: #003875;
	padding: 10px;
	margin: 0;
}

#headNav {
	margin-top: 15px;
	float:right;
	color: #FFFFFF;
}

	
#headNav ul, li {
	padding: 3px;
	list-style: none;
	display: inline;
}

#headNav ul, a:link, a:visited, a:hover {
	color: #FFFFFF;
	text-decoration:none;
}
#headNav a:hover {
	text-decoration: underline;
}

#grnbar {
	background-color: #008061;
	border-top:solid medium #FFFFFF;
	border-bottom:12px solid #FFFFCC;
	padding: 10px;
	height: 32px;
	margin: 0;
}
.logo {
	border: none;
}

	
#mainNavWrapper {
	text-align:left;
	width: 800px;
	margin: 0;
	padding: 0;
	background-color:#FFFFFF;
}
#services {
	float: left;
	clear: both;
	margin: 0 10px 0 0;
	padding:0;
	color:	#008061;
	font-size:80%;
	width:150px;
	height: 250px;
	background-color:#d9ece7;
}
#physicians {
	float: left;
	clear: right;
	margin: 0 10px 0 0;
	padding:0;
	color:	#008061;
	font-size:80%;
	width:150px;
	height: 250px;
	background-color:#d9ece7;
}

#patientInfo {
	float: left;
	margin: 0 10px 0 0;
	padding:0;
	color:	#008061;
	font-size:80%;
	width:150px;
	height: 250px;
	background-color:#d9ece7;
}

#resources {
	float: left;
	margin: 0 10px 0 0;
	padding:0;
	color:	#008061;
	font-size:80%;
	width:150px;
	height: 250px;
	background-color:#d9ece7;

}

#contact {
	float: left;
	margin: 0;
	padding:0;
	color:	#008061;
	font-size:80%;
	width:150px;
	height: 250px;
	background-color:#d9ece7;

}
#services ul {
	margin: 0 0 0 5px;
	padding: 5px;
	text-align: left;
	line-height:1em;
}
#services ul li {
	display: block;
}

#mainNavWrapper ul li a:link, a:active, a:visited {
	color:#008061;
}
#mainNavWrapper ul li a:hover {
	color: #008061;
	text-decoration: underline;
}
#physicians ul {
	text-align: left;
	margin: 0 0 0 5px;
	padding: 5px;
	line-height: 1em;
	
}
#physicians ul li {
	display: block;
	
}
#patientInfo ul {
	text-align: left;
	margin: 0 0 0 5px;
	padding: 5px;
	line-height: 1em;
	
}
#patientInfo ul li {
	display: block;
	
}
#resources ul {
	text-align: left;
	margin: 0 0 0 5px;
	padding: 5px;
	line-height: 1em;
	
}
#resources ul li {
	display: block;
	
}
#contact ul {
	text-align: left;
	margin: 0 0 0 5px;
	padding: 5px;
	line-height: 1em;
	
}
#contact ul li {
	display: block;
	
}
#left {
	float: left;
	clear: right;
	width: 290px;
	margin: 10px 0 0 0;
	padding: 10px;
	background-color: #FFFFCC;
}
.testimonial {
	color: #000033;
	text-align: justify;
	margin: 0;
	padding: 0;
}
.success1 {
	float: left;
	margin: 0;
	padding: 0 10px 10px 5px;
}
#left h1 {
	color:#000066;
	border-top: thin solid #000066;
	padding-top: 7px;
}
#left h3 {
	color: #000066;
	border-bottom: thin solid #000066;
	padding-bottom: 7px;
}
.readMore {
	text-align: right;
	font-size: 80%;
}
#mainContent {
	margin: 0 0 0 310px;
	padding: 5px 10px 0 10px;
	background-color:#FFFFFF;
}
#footer {
	color: #FFFFFF;
	font-size: 80%;
	text-align: center;
	width: 780px;
	clear: both;
	background-color:#000066;
	margin: 5px auto 0 auto;
	padding: 10px;
}
#mainContent a:link, a:visited {
	color: #191919;
}
#mainContent a:hover {
	text-decoration: underline;
}
.services {
	border: none;
}
img {
	border: none;
}
.validate {
	margin: 0 auto 0 auto;
	border:none;
}

Can you post the HTML too?

P.S. - I put your code into "code" tags so that it is displayed in that scrolling box. This way, it doesn't take up a lot of room on the whole screen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Carolina Orthopedics and Sports Medicine</title>
	<meta name="generator" content="BBEdit 8.7" />
<link rel="stylesheet" type="text/css" href="css/base.css" media="all" />

</head>
<body>

<!--Begin wrapper div for entire content-->

<div id="wrapper">

<!--Begin headNav div-->
    <div id="headNav">
    <ul>
    <li> <a href="index.html">Home</a></li>
    <li> <a href="docs/direction.html">Location</a></li>
    <li> <a href="docs/contact.html">Contact  COSM</a></li>
    </ul>
    </div>  
<!--End headNav div-->

<!--Begin logo div-->
    
<div id="logo"><a href="index.html"><img src="images/logo.jpg" class="logo" alt="COSM Logo" /></a>
</div>
<!--End logo div-->

<div id="grnbar">
<img src="images/name.gif" alt="name" />
</div>

<!-- Wrapper containing the main navigation-->
<div id="mainNavWrapper">
<!-- Begin Services Div-->
	<div id="services">
    <a href="docs/services.html"><img src="images/services.jpg" alt="services" class="services" /></a><br />
    <ul>
    	<li class="back"><a href="docs/back.html">Back &amp; Neck Surgery</a></li>
        <li class="elbow"><a href="docs/elbow.html">Elbow Surgery</a></li>
        <li class="foot"><a href="docs/foot.html">Foot &amp; Ankle Surgery</a></li>
        <li class="hand"><a href="docs/hand.html">Hand &amp; Wrist Surgery</a></li>
        <li class="joint"><a href="docs/joint.html">Joint Replacement</a></li>
        <li class="knee"><a href="docs/knee.html">Knee Surgery</a></li>
        <li class="sports"><a href="docs/sports.html">Sports Medicine</a></li>
      </ul>
      </div>
<!-- End Services Div-->

<!-- Begin Physicians Div-->
<div id="physicians">
    <a href="docs/physicians.html"><img src="images/physicians.jpg" alt="physicians" class="physicians" /></a><br/>
    <ul>
    	<li class="vandersea"><a href="docs/vandersea.html">Dr. Harold Vandersea</a></li>
        <li class="aurthur"><a href="docs/aurthur.html">Dr. Bart Aurthur</a></li>
        <li class="bradley"><a href="docs/bradley.html">Dr. R. Jay Bradley</a></li>
        <li class="bright"><a href="docs/bright.html">Dr. Don Bright</a></li>
        <li class="hiller"><a href="docs/hiller.html">Dr. Carl HIller</a></li>
        <li class="blair"><a href="docs/blair.html">Dr. Robert Blair</a></li>
        <li class="wertman"><a href="docs/wertman.html">Dr. Mark Wertman</a></li>
        <li class="wheatley"><a href="docs/wheatley.html">Dr. Bill Wheatley</a></li>
        <li class="staff"><a href="docs/staff.html">Staff</a></li>
      </ul>
</div>
<!-- End Physicians Div-->

<!-- Begin Patient Info Div-->
<div id="patientInfo">
    <a href="docs/patient.html"><img src="images/patientinfo.jpg" alt="patient info" class="patientinfo" /></a><br/>
    <ul>
    	<li class="success"><a href="docs/success.html">Patient Success Stories</a></li>
        <li class="appointment"><a href="docs/appointment.html">Request an Appointment</a></li>
        <li class="insurance"><a href="docs/insurance.html">Insurance &amp; Payments</a></li>
        <li class="facilities"><a href="docs/facilities.html">Facilities</a></li>
        <li class="forms"><a href="docs/forms.html">Downloadable Forms</a></li>
      </ul>
</div>
<!-- End patientinfo Div-->

<!-- Begin Resources Div-->
<div id="resources">
    <a href="docs/resources.html"><img src="images/resources.jpg" alt="resources" class="resources" /></a><br/>
    <ul>
        <li class="about"><a href="docs/about.html">About COSM</a></li>
        <li class="history"><a href="docs/history.html">History</a></li>
        <li class="mission"><a href="docs/mission.html">Mission Statement</a></li>
        <li class="new"><a href="docs/new.html">What's New?</a></li>
        <li class="health"><a href="docs/health.html">Health Information</a></li>
        <li class="weather"><a href="docs/weather.html">New Bern Weather</a></li>
        <li class="nbinfo"><a href="docs/nbinfo.html">New Bern Info</a></li>
        <li class="privacy"><a href="docs/privacy.html">Privacy Notice</a></li>
      </ul>
</div>
<!-- End Resources Div-->

<!-- Begin Contact Div-->
<div id="contact">
    <a href="docs/contact.html"><img src="images/contact.jpg" alt="contact us" class="contact" /></a><br/>
    <ul>
        <li class="contact"><a href="docs/contact.html">Contact Us</a></li>
        <li class="appointment"><a href="docs/appointment.html">Appointment Request</a></li>
        <li class="map"><a href="docs/direction.html">Map to Facilities</a></li>
      </ul>
</div>
<!-- End Contact Div-->

</div>
<!-- End mainNavWrapper-->

<!--Begin div for left side column-->
<div id="left">

<!--Begin Signup Form-->
	<div id="list">
    <h3>Sign Up For Our Newletter</h3>
      <form action="http://carolinaorthopedics.com/cgi-bin/formmail.pl" method="post" id="webForm">
      <p>
        <input name="email" type="text" id="email" value="Enter E-Mail Address" />
      </p>
      <p>
        <input type="submit" name="submit" id="submit" value="Submit" />
      </p>
    </form>
    </div>
    <!-- End of Signup Form -->

<h1>Success Stories</h1>
<p><img src="images/success.jpg" width="67" height="67" class="success1" alt="success stories" /></p>
<p class="testimonial"> Meet Jennifer. Jennifer came us, some text text and some more text and still more text</p>
<p class="readMore">Read More > </p>
</div>
<!--End div for left side column-->

<!-- Begin Main Content-->
<div id="mainContent">
<h2>Welcome!</h2>
<p>Carolina Orthopedics &amp; Sports Medicine is committed to providing you with the best and most current proven treatment methods available. Rest assured that you'll get good care because our surgeons are board certified/eligible orthopedic specialists.</p>
<p>Beyond striving to be the best surgical practioners, we're committed to being courteous, professional, caring and compassionate. The restoration of your well-being is our primary concern.</p>
<p>Conveniently located at 800 Hospital Drive in New Bern, NC, Carolina Orthopedics &amp; Sports Medicine provides back and neck surgery, elbow surgery, foot and ankle surgery, hand and wrist surgery, joint replacement, knee surgery and sports medicine among many other services.</p>
<p>Please take your time and browse our site. If you can't find what you're looking for, please <a href="mailto: dgarrett@carolinaorthopedics.com">contact us</a>.</p>
</div>
<!--End mainContent div-->



<!-- Begin Footer-->
<div id="footer">
&copy; 2007, Carolina Orthopedics and Sports Medicine, Inc. <br /> All Right Reserved. | Privacy Policy.

</div>
<!-- End footer-->

</div>
<!--End wrapper div for entire site content-->

<p class="validate">
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  </p>

</body>
</html>

I really appreciate your help!

Okay, apparently, with XHTML Strict, you have to be really specific about your colors. So, try and go through all your divs and make sure a background color and text color is stated. I did this with the mainNavWrapper and the headNav and checked it. It did take away a few errors!

Yes, the validator chokes up hairballs when you don't specifically have the background AND text color defined for everything. It's not really a function of XHTML Strict, and lots of people have complained about this 'warning' from the validator. It's really more of an ACCESSIBILITY thing than XHTML. You can make it easier if you set colors to 'inherit' for backgrounds where none is really specified.