Opacity property throwing an error

Discussion in 'CSS' started by tintumon, Sep 11, 2010.

  1. #1
    When I try to validate my site's CSS, a CSS file that works in conjunction with some JavaScript files I use to randomly rotate and fade my top banner images in and out throws this error message: Property opacity doesn't exist in CSS level 2.1 but exists in : 1 1

    The validator throws twelve such error messages for twelve different lines of the CSS file, three of which are these:


    .slideshow-images-visible { opacity: 1;}
    .slideshow-images-prev { opacity: 0; }
    .slideshow-images-next { opacity: 0; }


    In case it matters, I'm using the strict docType declaration at the top of my header:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


    I'd like to continue using these files, and I also would like my CSS to validate. Can you tell me if there is a fix or work-around I can use?
     
    tintumon, Sep 11, 2010 IP
  2. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #2
    Opacity is a CSS3 property but the validator is not set up for that just yet.

    You could do one CSS file for CSS3 only and <link> to it. So your normal CSS could be valid.
     
    CSM, Sep 11, 2010 IP
  3. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #3
    radiant_luv, Sep 11, 2010 IP
  4. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You can also get around it with Javascript, but this is a perfect excuse for ignoring the validator.
     
    Cash Nebula, Sep 13, 2010 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Seeing as you are only using opacity:1; and opacity:0; you could probably get away with using display:none; or visibility:hidden, although this might require a bit of additional tweaking if it causes other problems.

    Although as suggested I wouldn't worry about it.
     
    wd_2k6, Sep 15, 2010 IP