CSS validation, background color.

[Guest nraic]

My code doesn’t seem to validate and I don’t understand why.h1{font-family: Verdana, sans-serif; color: Black; -------------------------------line 9text-align: center;background-color: transparent;}a{font-family: Verdana, sans-serif; color: Blue; ------------------------------ line 17text-align: center;background-color: transparent;}Errors Line : 9 (Level : 1) You have no background-color with your color : h1Line : 17 (Level : 1) You have no background-color with your color : aWhen setting the background-color to any thing else it validates fine.The transparent seems to be listed as a valid attribute.Am I some how using it wrong?

[skym]

I always use hex code (#000000 and #0000ff in your case). Also try with lowercase.

[boen_robot]

It seems the W3C validator doesn't like the keyword "transparent". If you explicitly use a color in any other form, it removes the warning. The strange thing is that it doesn't show a syntax error or anything. It just behaves as if background-color is not declared at all.I think I'm going to report this to the validator team right now.[edit] It's reported. See Bug 768 for details.[/edit]

[BiteMe]

Its all about accessablility.You have to specify a background color with your color, and visa-versa.If you dont want a color or background colour, use :inherit;this will validate against W3C.Also check if its an error or a warning, if its a warning this is still valid code, but it p**ses me of that you cant have one with out the other.

It seems the W3C validator doesn't like the keyword "transparent". If you explicitly use a color in any other form, it removes the warning. The strange thing is that it doesn't show a syntax error or anything. It just behaves as if background-color is not declared at all.I think I'm going to report this to the validator team right now.[edit] It's reported. See Bug 768 for details.[/edit]

I belive that 'transparent' is only for fx, it wont work in ie, suprise spuprise,

[boen_robot]

I belive that 'transparent' is only for fx, it wont work in ie, suprise spuprise,

As far as I'm familiar with, "background-color: transparent;" is the equivalent of not declaring a background color at all. However, as the people in the bug say, when it's explicitly written, the validator shouldn't return warnings, or if it does, the warning should be something other than "You haven't declared a background-color with your color".Here are possible combinations as to what will happen in different situations.HTML:

<div id="a">This is an outer div<div id="b">This is an inner div</div></div>

With this CSS:

#a {background: url('background-image.gif') #000000; color: #FFFFFF;}#b {background: inherit; color: #000000;}

The image is going to appear twice- once in #a and once in #b. If we suppose #b's background-color is seen along with the text, this result could make the text invizible.With this CSS:

#a {background: url('background-image.gif') #000000; color: #FFFFFF;}#b {background-color: inherit; color: i#000000;}

The image appears once in the outer div, but #b's background becomes black, thus covering the image. This result again, causes invizible text.With this CSS:

#a {background: url('background-image.gif') #000000; color: #FFFFFF;}#b {background-color: transparent; color: #000000;}

The image is shown once and a black text is shown without any background, thus appearing as if it's right over the outer div. This may be our desired result. If we suppose the outer div's background-color is visible where there is also text, this could still cause the text turn invisible, but unlike the second CSS, if the image doesn't do that, the text appears right.And here comes the most interesing CSS:

#a {background: url('background-image.gif') #000000; color: #FFFFFF;}#b {background: inherit transparent; color: inherit;}

This will apply the image on both #a and #b, but in the palces where there's no image, we'll see the corresponding part of the outer image or the outer div's background-color. The text will be kept white.You can see that "transparent" allows the user to explicitly achieve the same effect as to not declaring background-color, while still explicitly declaring it.