I normally try XHTML Validation, however, this time I'm trying CSS validation as well.

Most of these errors that I came across were in "background-color" and it says you've NO "background-color", which after delving into it further, I realised that whereever I've "color", I HAVE TO HAVE "background-color" as well or whereever I had "background-image", I should ALSO have "background color" & "color", alongside.

Bearing this in mind, I managed to reduce the error considerably, however, there seems a tiny hiccup at the moment.

I've the background of "centerContent" as image. WITHIN this centerContent, I've texts & within these texts, I've many headings.

Now, if I use "h3" and type in "Favourite", it'll display in "h3" style, HOWEVER, the precise background of "h3" stays whatever the background of the "contentCenter" is, which is perfectly fine.

h3
{
	color:purple;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:left;
	font-size:150%;
	margin:2% 3%;
	border-bottom:thin solid #990000;
}

Now, the "background-color:transparent" works perfectly well but if I put "background-color:transparent", I'm STILL getting warning for that. Hence, when I do "background-color:#FFFFFF;", I'll get the "white" space behind the "h3" and NOT the contentCenter's image. Same goes for other elements like "p", "h1", etc.

In addition, if I do "background:url(centercontentbackground.jpg) #FFFFFF;", what it does is that it although displays the "centerContent's" image, but it displays it OVER "centerContent's image" i.e. the same image OVER each other.

Attached with this message is the "template" page i.e. the way it look IF I add "background:url(centercontentbackground.jpg) #FFFFFF;" in "p" element.

While the same template page can be seen with ONLY ONE image i.e. "centerContentbackground's image" perfectly well on:

http://darsh25.silverserve.co.uk/AllInclusiveWebDesign/template.php

Recommended Answers

All 4 Replies

Sorry, but I've read this a couple of times and don't see a question. Could you distill all of the above into a single, succint, specific question?

Sorry, but I've read this a couple of times and don't see a question. Could you distill all of the above into a single, succint, specific question?

I'm terribly sorry but I reckon this is the very first time, I'd asked this question regarding CSS validation. I may've asked different question lately, but this question in particular is about completely different matter & hence quite obviously, needed new thread.

That's fine, but... what is the question?

I think the question is - how do i get rid of the validation 'warning' regarding background-color/color combinations on elements.

The answer is - they are 'WARNINGS', and are to alert you to a possibility that you could be placing text over a background that does not have a high colour contrast. The usual workaround is to declare a color/background-color for each element. Using background-color: transparent will still generate a WARNING because the validator does not implement inheritence to determine whether another element is providing a suitable background-color.

To reiterate - the validator is giving you a WARNING, alerting you to a possible problem with color combinations. They are not errors, and once you have confirmed for yourself that no text is displayed on an unsuitable background, the warnings can be ignored.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.