Grow your CSS skills. Land your dream job.

Ellipse Cover Errors

  • # February 6, 2013 at 10:57 pm

    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

    # February 7, 2013 at 6:25 am

    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

    # February 7, 2013 at 11:58 am

    Thanks, Paulie_D!

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

    # February 7, 2013 at 1:51 pm

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

    # February 7, 2013 at 2:10 pm

    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?

    # February 7, 2013 at 2:14 pm

    Scroll down to the section marked “extent-keywords”

    # February 7, 2013 at 2:52 pm

    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.

    # February 7, 2013 at 3:44 pm

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

    # February 7, 2013 at 4:22 pm

    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!

    # February 7, 2013 at 5:28 pm

    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.

    # February 7, 2013 at 6:07 pm

    OK. Thanks for everything, Paulie_D!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".