CSS Validation problem

Hello

I wondered if someone could explain what these errors mean.

This are errors highlighted by a css Validator. I have only pasted in a few of the errors.

I have also attached my css style sheet below.

Thanks to anyone who can help

Regards Ian

Same colors for color and background-color in two contexts .searchbox td and #homelist a:visited
124 Same colors for color and background-color in two contexts .subnavbox and #homelist a:visited
124 Same colors for color and background-color in two contexts #wrapper and #homelist a:visited
124 Same colors for color and background-color in two contexts .topprods and #homelist a:visited
124 Same colors for color and background-color in two contexts .contenttable and #homelist a:link
124 Same colors for color and background-color in two contexts .contenttable and #homelist a:visited
124 Same colors for color and background-color in two contexts .topnavbox and #homelist a:link
124 Same colors for color and background-color in two contexts .searchbox td and #homelist a:link
124 Same colors for color and background-color in two contexts .subnavbox and #homelist a:link
124 Same colors for color and background-color in two contexts .topnavbox and #homelist a:visited
124 Same colors for color and background-color in two contexts #wrapper and #homelist a:link
124 Same colors for color and background-color in two contexts .topprods and #homelist a:link
130 Same colors for color and background-color in two contexts .topnavbox and #homelist a:hover
130 Same colors for color and background-color in two contexts .subnavbox and #homelist a:hover
130 Same colors for color and background-color in two contexts #wrapper and #homelist a:hover
130 Same colors for color and background-color in two contexts .searchbox td and #homelist a:hover
130 Same colors for color and background-color in two contexts .contenttable and #homelist a:hover
130 Same colors for color and background-color in two contexts .topprods and #homelist a:hover
163 Same colors for color and background-color in two contexts .topprods and .cartlinks
163 Same colors for color and background-color in two contexts .topnavbox and .cartlinks
163 Same colors for color and background-color in two contexts .subnavbox and .cartlinks
163 Same colors for color and background-color in two contexts .contenttable and .cartlinks
163 Same colors for color and background-color in two contexts #wrapper and .cartlinks
163 Same colors for color and background-color in two contexts .searchbox td and .cartlinks
302 Same colors for color and background-color in two contexts .horiz-top-on and .horiz-top a:hover
302 Same colors for color and background-color in two contexts .mfg-button and .horiz-top a:hover
393 Same colors for color and background-color in two contexts .searchbox td and .cartlinks a:link
393 Same colors for color and background-color in two contexts .subnavbox and .cartlinks a:link
393 Same colors for color and background-color in two contexts #wrapper and .cartlinks a:link
393 Same colors for color and background-color in two contexts .contenttable and .cartlinks a:link
393 Same colors for color and background-color in two contexts .topnavbox and .cartlinks a:link

My CSS Sheet

.leftnav {
width:165px;
padding-top:3px;
margin:6px 6px 6px 0;
}

.rightnav {
width:165px;
padding-top:3px;
margin:6px 0 3px 8px;
}

.bothnavhead {
width:165px;
height:17px;
color:#FFF;
text-align:center;
font-weight:700;
font-size:10pt;
background-color:#093;
padding-top:3px;
padding-bottom:2px;
margin:0;
}

.subnavbox {
width:163px;
border-top:0;
border-left:1px solid #093;
border-right:1px solid #093;
background-color:#FFF;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#093;
margin:0;
}

.subnavboxcred {
width:163px;
background-image:url(card-logos.jpg);
height:103px;
background-repeat:no-repeat;
background-position:center center;
margin:10px 0 0;
}

.topnavbox {
width:163px;
border-top:0;
background-color:#FFF;
float:right;
list-style-position:inside;
position:absolute;
margin:0 0 0 350px;
}

.topprod-table {
margin-bottom:5px;
width:165px;
}

.topprod-head {
width:165px;
color:#FFF;
text-align:center;
font-weight:700;
font-size:10pt;
background-repeat:no-repeat;
background-color:red;
height:17px;
margin:0;
}

.topprods {
width:163px;
padding-bottom:2px;
border-top:0;
border-bottom:1px solid red;
background-color:#FFF;
border-right-width:1px;
border-left-width:1px;
border-right-style:solid;
border-left-style:solid;
border-right-color:red;
border-left-color:red;
padding-top:2px;
}

.mfg-select {
font-size:9px;
}

.mfg-button {
font-size:9px;
background-color:#fc0;
}

.breadcrumb {
margin-left:10px;
font-size:9pt;
margin-bottom:10px;
}
ul#homelist{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
margin-right: 15px;
margin-bottom: 0px;
margin-top: 10px;
}

#homelist li
{
display: inline;
list-style-type: none;
}

#homelist a { padding: 0px 5px; }

#homelist a:link, #homelist a:visited
{
color: #fff;
text-decoration: underline;
}

#homelist a:hover
{
color: #fff;
text-decoration: underline;
}

.specialnav a {
display:block;
font-weight:700;
width:163px;
color:#000;
margin-right:0;
text-indent:12px;
cursor:pointer;
text-decoration:none;
padding-top:1px;
padding-bottom:1px;
}

.content-link a {
display:block;
font-weight:700;
width:163px;
color:#000;
text-indent:12px;
cursor:pointer;
text-decoration:none;
padding-top:1px;
padding-bottom:1px;
}

.cartlinks {
font-size:8pt;
text-align:right;
margin-right:7px;
color:#FFF;
}

.cartlinks a:hover {
text-decoration:none;
color:#FF6;
}

.vert-level-0 a {
display:block;
font-weight:700;
width:163px;
color:#000;
text-indent:12px;
cursor:pointer;
text-decoration:none;
padding-top:2px;
padding-bottom:2px;
border-top-width:1px;
border-top-style:solid;
border-top-color:#093;
margin:0;
}

.vert-level-0 a:hover {
color:#000;
background-repeat:no-repeat;
background-color:#DBF2D6;
display:block;
}

.vert-level-0-on a {
display:block;
font-weight:700;
width:163px;
color:red;
background-repeat:no-repeat;
text-indent:12px;
text-decoration:none;
cursor:pointer;
padding-top:2px;
padding-bottom:2px;
background-color:#DBF2D6;
border-top-width:1px;
border-top-style:solid;
border-top-color:#093;
}

.vert-level-1 a {
display:block;
font-size:11px;
color:#000;
text-indent:16px;
cursor:pointer;
text-decoration:none;
padding-top:1px;
padding-bottom:1px;
}

.vert-level-1 a:hover {
color:#000;
background-color:#FFC;
}

.vert-level-1-on a {
display:block;
font-size:11px;
color:#000;
text-indent:16px;
text-decoration:none;
cursor:pointer;
background-color:#FFC;
padding-top:1px;
padding-bottom:1px;
}

.vert-level-2 a {
display:block;
font-size:10px;
color:#000;
margin-left:3px;
margin-right:3px;
text-indent:24px;
cursor:pointer;
text-decoration:none;
}

.vert-level-2-on a {
display:block;
font-size:10px;
color:#FF4000;
margin-left:3px;
margin-right:3px;
text-indent:24px;
text-decoration:none;
cursor:pointer;
}

.vert-level-3 {
text-indent:34px;
font-size:10px;
color:#000;
}

.vert-level-3-on {
color:#FF4000;
text-indent:34px;
font-size:10px;
}

.vert-level-4 {
text-indent:40px;
font-size:9px;
color:#000;
}

.vert-level-4-on {
text-indent:40px;
font-size:9px;
}

.topnav {
background-color:#069;
text-align:right;
text-decoration:none;
margin:0;
}

.horiz-top {
display:inline;
line-height:24px;
color:#FFF;
font-weight:700;
background-color:#069;
margin:0;
padding:0 5px;
}

.horiz-top a:hover {
color:#FC0;
border-color:#CCC;
border-style:solid;
border-width:0 1px;
margin:0;
padding:0 5px;
}

.horiz-top-on {
display:inline;
line-height:24px;
color:#069;
background-color:#FC0;
font-weight:700;
margin:0 6px;
padding:3px;
}

.horiz-child-bar {
display:block;
line-height:20px;
width:100%;
background-color:#FFC;
}

.horiz-child {
display:inline;
margin-bottom:2px;
line-height:20px;
color:#000;
font-weight:700;
padding:0 10px;
}

.horiz-child-on {
display:inline;
margin-bottom:2px;
line-height:20px;
color:#FF4000;
font-weight:700;
padding:0 10px;
}

.map-level-0 {
font-weight:700;
font-size:12pt;
margin:10px 20px;
}

.map-level-1 {
margin-left:35px;
font-weight:700;
font-size:10pt;
}

.map-level-2 {
margin-left:45px;
font-size:9pt;
}

.breadcrumb a:link,.breadcrumb a:visited,.breadcrumb a:hover {
font-size:9pt;
}

.specialnav a:link,.specialnav a:visited,.content-link a:link,.content-link a:visited,.content-link-on a:link,a:visited,.vert-level-0 a:link,.vert-level-0 a:visited,.vert-level-1 a:link,.vert-level-1 a:visited,.vert-level-1 a:active,.vert-level-2 a:link,.vert-level-2 a:visited,.vert-level-2 a:active,.horiz-child a:link,.horiz-child a:visited {
color:#000;
}

.specialnav a:hover,.content-link a:hover {
color:#000;
background-repeat:no-repeat;
background-color:#DBF2D6;
}

.specialnav-on a,.content-link-on a {
display:block;
font-weight:700;
width:163px;
color:#000;
background-repeat:no-repeat;
margin-right:0;
text-indent:12px;
text-decoration:none;
cursor:pointer;
background-color:#DBF2D6;
padding-top:1px;
padding-bottom:1px;
}

.cartlinks a:link,.cartlinks a:visited,.cartlinks a:active {
text-decoration:none;
color:#FFF;
}

.vert-level-1-on a:link,a:visited,.vert-level-2-on a:link,a:visited,.horiz-child a:hover,.horiz-child-on a:link,.horiz-child-on a:visited,.horiz-child-on a:hover {
color:#FF4000;
}

.vert-level-2 a:hover,.horiz-top-on a:link,.horiz-top-on a:visited,.horiz-top-on a:hover {
color:#069;
}

.horiz-top a:link,.horiz-top a:visited {
color:#FFF;
border-color:#069;
border-style:solid;
border-width:0 1px;
margin:0;
padding:0 5px;
}

.map-content-link,.map-content-link-on {
margin-left:20px;
font-weight:700;
font-size:12pt;
}

Those you posted are warnings. To stop the errors specify differenet background colors. #FFF aka white is default so you don’t have to specify it for every element.

You could also use transparent backgrounds or inherited colors to use what parent elements (including the body default) would default to without anything being specified. :slight_smile:

Everywhere you specify either a background-color or color you should specify both and make sure they are different colours. If you only specify one then the other can be assigned the same colour from a user stylesheet and that user ends up not being able to see the content.

I’ve just spent hours re-organising my stylesheet to try to deal with those warnings and finally turned to searching to see if what I thought the warning meant was actually that - it wasn’t! So, now my stylesheet is re-organised and re-validated and it still passes but now there are no warnings either. Thank you so much.

Glad to hear that :). In the future you can generall ignore warnings such as same cbackground or color set on different elements. That is almost unavoidable and doing so would be stupid to do just to get that nice validation icon :).

Glad you got it sorted though.