Forums

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

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!

treehouse : what would you like to learn today?

Forums

[Solved] Ellipse Cover Errors