Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Ellipse Cover Errors

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #42536
    k_mcminn
    Member

    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

    #123632
    Paulie_D
    Member

    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

    #123683
    k_mcminn
    Member

    Thanks, Paulie_D!

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

    #123705
    Paulie_D
    Member

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

    #123708
    k_mcminn
    Member

    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?

    #123709
    Paulie_D
    Member

    Scroll down to the section marked “extent-keywords”

    #123714
    k_mcminn
    Member

    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.

    #123722
    Paulie_D
    Member

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

    #123730
    k_mcminn
    Member

    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!

    #123732
    Paulie_D
    Member

    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.

    #123736
    k_mcminn
    Member

    OK. Thanks for everything, Paulie_D!

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.