Grow your CSS skills. Land your dream job.

figcaption Validation error

  • MBM
    # May 30, 2012 at 6:19 pm

    I’ve got 10 validation errors on my website :

    Line 217, Column 12: Element figcaption not allowed as child of element li in this context. (Suppressing further errors from this subtree.)

    Spartacus The Television Series

    Here’s the HTML :

    And the url :

    http://mbmitservices.co.uk/

    # May 30, 2012 at 7:03 pm

    For this to validate, you have to wrap the image and figcaption in a figure:



    Caption

    MBM
    # May 30, 2012 at 9:09 pm

    Thanks. Valid and displaying correctly in the major browsers. When I added the figure tag it added a big ugly white border around the thumbnails. I defined two figure classes, one for the thumbnails which defaulted the border to it’s original size :

    .noframe {
    margin:0;
    }

    And another which added a frame, even though this was defined in a class previously but for some reason it wouldn’t display, to the full size image :

    .frame {
    margin:0;
    background:#ffffff;
    padding: 6px 6px 6px 6px;
    }

    The HTML :

    That seems a terribly inefficient way of doing something a simple as added a caption and a frame!

    # May 31, 2012 at 1:46 am

    Instead of using two different classes, you should just have a default for ‘figure’ and then one with a frame. Eg:

    figure { /* no frame */ }

    .frame { /* frame styles */ }
    MBM
    # May 31, 2012 at 11:55 am

    Thanks.

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

You must be logged in to reply to this topic.

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