Ellipse Cover Errors

[k_mcminn]

Does anyone know why the following CSS doesn’t validate?

/* Gradient Horizontal Line */
#gradient {
height:2px;
margin-bottom: 15px;
/* FF3.6+ */
background: -moz-radial-gradient(center, ellipse cover, #D01737 25%, #00549D 40%, rgba(3,3,3,0) 80%, rgba(1,1,1,0) 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(radial, center center, 0px, center center, 0%, color-stop(25%, #D01737)), color-stop(40%, #00549D)), color-stop(80%,rgba(3,3,3,0)), color-stop(100%,rgba(1,1,1,0)));
/* Chrome10+,Safari5.1+ */
background: -webkit-radial-gradient(center, ellipse cover, #D01737 25%, #00549D 40%,rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%);
/* Opera 12+ */
background: -o-radial-gradient(center, ellipse cover, #D01737 25%, #00549D 40%, rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%);
/* IE10+ */
background: -ms-radial-gradient(center, ellipse cover, #D01737 25%, #00549D 40%,rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%);
/* W3C */
background: radial-gradient(center, ellipse cover, #D01737 25%, #00549D 40%,rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%);
/* IE6-9 fallback on horizontal gradient */
}

EDIT: Specifically on this page:

http://www.nintendonerds.com/pokemonxy

[Paulie_D]

I think ‘cover’ might have been deprecated.

>Early drafts were defining to other keywords, cover and contain, synonyms of the standard farthest-corner and closest-side respectively. Do exclusively use the standard keyword as some implementations have dropped to older variants.

https://developer.mozilla.org/en-US/docs/CSS/radial-gradient

[k_mcminn]

Thanks, Paulie_D!

Should I change that then, or it it something I shouldn’t worry too much about?

[Paulie_D]

Well if it’s not working and you need it to then clearly you will have to update to the latest syntax.

[k_mcminn]

It’s working, I just don’t like all the errors it’s throwing when I validate it. Also, I didn’t see replacements in that link you provided. Were there any?

[Paulie_D]

Scroll down to the section marked “extent-keywords”

[k_mcminn]

I apologize, Paulie_D. I see the syntax area, but I’m not sure if I’m supposed to be replacing ellipse and circle with something else.

[Paulie_D]

I think you are supposed to replace ‘cover’ with one of the ‘constant’ keywords

[k_mcminn]

Hmm…I see what you’re saying. I’ve replaced “cover” with “farthest-corner” and I’m still getting errors. It looks good though so I’m not sure.

[CSS Validate Errors](http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.nintendonerds.com%2Fpokemonxy&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en#errors “CSS Validate Errors”)

This one seems to be pretty tricky!

[Paulie_D]

I don’t think you need to worry about those.

Lots of the CSS3 properties fail validation…if they work, I wouldn’t sweat it.

[k_mcminn]

OK. Thanks for everything, Paulie_D!

[Author]

Posts