SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border-radius Error

    I just ran my page through the CSS validator, validating as CSS3, but keep getting an error, Parse Error [empty string] because of the border-radius attribute I have in my stylesheet. If I remove that line, the stylesheet validates. Why does border-radius fail? It is a CSS3 property.

    Here is what that line looks like in my file -
    Code:
    border-radius: 10px 10px 10px 10px;

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I can tell, you can't use such a shortcut for border-radius, so you'll have to do border-top-left-radius, border-top-right-radius, etc etc. You can only have the one value for border-radius which will effect all of the corners

    (Also I'm not sure if the validator understands border-radius yet... I haven't checked)

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by clairs View Post
    As far as I can tell, you can't use such a shortcut for border-radius, so you'll have to do border-top-left-radius, border-top-right-radius, etc etc. You can only have the one value for border-radius which will effect all of the corners

    (Also I'm not sure if the validator understands border-radius yet... I haven't checked)
    It must not recognize it yet.
    Validating it as CSS3, just yields four errors now instead of one -
    Code:
    20  	 #container Parse Error  [empty string]
    21 	#container 	Parse Error [empty string]
    22 	#container 	Parse Error [empty string]
    23 	#container 	Parse Error [empty string]
    or as CSS2.1
    Code:
    20  	 #container  Property border-top-left-radius doesn't exist in CSS level 2.1 but exists in : 10px  10px
    21 	#container 	Property border-top-right-radius doesn't exist in CSS level 2.1 but exists in : 10px 10px
    22 	#container 	Property border-bottom-left-radius doesn't exist in CSS level 2.1 but exists in : 10px 10px
    23 	#container 	Property border-bottom-right-radius doesn't exist in CSS level 2.1 but exists in : 10px 10px

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does 'border-radius: 10px' validate?

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by clairs View Post
    Does 'border-radius: 10px' validate?
    Nope, when I validate I get one of the following errors -

    CSS3 - 20 #container - Parse Error [empty string]
    CSS2.1 - 20 #container - Property border-radius doesn't exist in CSS level 2.1 but exists in : 10px 10px

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    border radius is css3. The validator is 2.1 or something. Just ignore it it's no big deal.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Or don't use CSS3 since it's not a W3C recommendation -- meaning it's NOT for use on production websites yet...

    and while CSS3 is in draft, the validator for it is USELESS even on valid CSS, throwing errors on stuff that's even valid in CSS 2.1 -- just ANOTHER reason not to waste your time trying to use it in the first place unless your purpose is to test for and report bugs to the browser makers or make suggestions on the specification itself!

    Christmas on a cracker people -- STOP jumping the gun using specifications that aren't even recommendations yet!!!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It seems to be a bug in the validator which as mentioned above is still a work in progress as far as css3 is concerned so I shouldn't worry about it.

    Unlike Jason though I see no harm in using certain features of CSS3 where there is no real harm if the specs are changed at a later date such as in the case of round corners. If the specs are changed you just won't get round corners which is no great loss.

    However I would advise against using any css3 where the structure of a site depends on it because then you may well come unstuck.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •