Forums

MBM

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 :

<div id="gallery">
<ul>
<li>
<img src="images/Spartacus_tn.png" class="mini" alt="Spartacus Starz"/>
<figcaption>Spartacus The Television Series</figcaption>
<div class="pic">
<img src="images/Spartacus_001.png" alt="Starz Spartacus"/>
<figcaption>Spartacus The Television Series - A HTML5 &amp; CSS3 website developed as part of a University project</figcaption>
</div>
</li>

And the url :

http://mbmitservices.co.uk/

agrimsrud

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

<figure>
    <img src="image.jpg" alt=""/>
    <figcaption>Caption</figcaption>
</figure>

MBM

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 :

<div id="gallery">
<ul>
<li>
<figure class="noframe">
<img src="images/Spartacus_tn.png" class="mini" alt="Spartacus Starz"/>
<figcaption>Spartacus The Television Series</figcaption></figure>
<div class="pic">
<figure class="frame"><img src="images/Spartacus_001.png" alt="Starz Spartacus"/>
<figcaption>Spartacus The Television Series - A HTML5 &amp; CSS3 website developed as part of a University project</figcaption></figure>
</div>
</li>

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

TheDoc

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

Thanks.

treehouse : what would you like to learn today?

Forums

[Solved] figcaption Validation error