I just have the 3 validation errors on my external CSS files that are rather self-explanatory:

• Line : 160 (Level : 1) You have no background-color with your color : .style5navlist li
• Line : 168 (Level : 1) You have no background-color with your color : .style5navlist a:visited
• Line : 168 (Level : 1) You have no background-color with your color : .style5navlist a:visited

The thing is if I add the background: #FFFFFF; my horizontal menus at the top of the page appear but the vertical lines going down to separate each link disappear, obviously because the background color is white. But I want the background color as white which it was originally, but I try and correct these validation errors the vertical lines disappear instead of staying grey.

How can I correct this?

Heres the previous css which was fine apart from the above validation errors:




.style5navlist {
margin: 0;
padding: 0;
width: 50px;
font: 11px/14px Arial, verdana, helvetica, sans-serif;
border-right: none;
float: left;
}

.style5navlist li {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
float: left;
text-align: center;
border-right: 1px solid #ccc;
color: #555555;
}

.style5navlist a:link, .style5navlist a:visited {
display: block;
padding: 0.50em 0;
font-weight: normal;
text-decoration: none;
color: #666;
width: 50px;
}

Try background-color: none;

background-color: none is not a valid color value

background-color: none is not a valid color value

I am aware of that... I thought maybe it would make the error go away though... What validator are you using anyway?

Also, could you provide a link to your page? By seeing what you are talking about with the menu, it will be easier to give you a better solution.

I use the W3C CSS Validation Service.

This is the original code for menu, wheres it asking for the background-color for each one.



.style5navlist {
margin: 0;
padding: 0;
width: 50px;
font: 11px/14px Arial, verdana, helvetica, sans-serif;
border-right: none;
float: left;
}

.style5navlist li {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
float: left;
text-align: center;
border-right: 1px solid #ccc;
color: #555555;
}

.style5navlist a:link, .style5navlist a:visited {
display: block;
padding: 0.50em 0;
font-weight: normal;
text-decoration: none;
color: #666;
width: 50px;
}

perhaps...
background-color: transparent;

Still comes up with validation errors. It doesnt like background-color: transparent;

Line : 161 (Level : 1) You have no background-color with your color : .style5navlist li
Line : 170 (Level : 1) You have no background-color with your color : .style5navlist a:visited
Line : 170 (Level : 1) You have no background-color with your color : .style5navlist a:visited

Part of my CSS code:



.style5navlist li {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
float: left;
text-align: center;
border-right: 1px solid #ccc;
background-color: transparent;
color: #555555;
}

.style5navlist a:link, .style5navlist a:visited {
display: block;
padding: 0.50em 0;
font-weight: normal;
text-decoration: none;
background-color: transparent;
color: #666;
width: 50px;
}

try this... (copy and paste exact coding as a couple lines moved)...

.style5navlist li {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
float: left;
text-align: center;
border-right: 1px solid #ccc;
background-color:inherit;
color: #555555;
}

.style5navlist a:link, .style5navlist a:visited {
display: block;
padding: 0.50em 0;
width: 50px;
font-weight: normal;
text-decoration: none;
background-color:inherit;
color: #666;
}

yep now validates with no errors. Thanks for your help.

what does inherit mean in relation to CSS?

it "inherits" or "takes on" the current properties of the "parent" property.

so...

HTML is the parent of BODY because it surrounds it.
BODY is the parent of all the tags inside of it.

if you look at your coding, a lot of tags are nested inside another one. that is a parent/child relationship.

in the end... if it works... it works.

ok thanks for your help