Figure Stopped Working

Support
#1

hi

I have an issue that has only just been spotted using the <figure> tag.

I have a number of CSS classes setup using this and all of a sudden, some of them no longer see to work, whilst some of them work perfectly. In my blog posts, they all appear to be working sine, so I cannot work out why the same code refuses to work in a normal page. Nothing in the content of the page has changed, nor has the CSS. These are just pages which were woking perfectly and are now not.

I use the Import Image button to bring in the images I want in and have the following code:

<figure class="right-33">
  <img class="scaled" src="http://feastthailand.com/wp-content/uploads/2017/04/LeighNewsletter-245x300.jpg" alt="Leigh Higgins - General Manager Feast Thailand" width="245" height="300" class="alignright size-medium wp-image-7981" style="margin-bottom: 0;" />
  <figcaption>Leigh - GM @ Feast Thailand</figcaption>
</figure>

There are a number of them from 33 left and right to 40, 45, 50, 60 and 100. They have always worked really well and I am struggling to find out what has changed, but only in pages, not in blog posts.

Here is a sample of the CSS for just one of these IDs:

figure.right-33 {
  float: right;
  width: 33%; 
  text-align: center;
  font-style: italic;
  font-weight: 500;
  font-size: smaller;
  color: #045893; 
  text-indent: 0;
  border: none;
  margin: 6px 0 -2px 5px;
  padding: 0 0 0 5px;
}

The page in question is feastthailand.com/august-newsletter, though frankly, it is all pages using these IDs except blog posts, which are not affected.

Is there possibly some update that has happened that has affected this, as I have not updated X in quite a while due to all the issues people are having with updates affecting their pages?

Any help gladly accepted.

#2

Hi

Just a follow up, as I forgot to show the “scaled” class CSS.

img.scaled {
  display: block;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 2px;
}

If code of right-33, the image is fine, yet if I change the word right to left, the image behaves differently, yet the CSS for each is identical, except for the alignment - float right vs float left. Something is affecting all of the left aligned images. I have attached an image of what I am talking about.

And just remember that nothing in CSS has changed with regard to the figure tags and nothing has changed in pages that were previously published. They are just not behaving the way they did when first published, and there seems no rhyme or reason as to why.

I hope someone is able to work out what is causing these images to behave this way. This is the same image, firstly right-33 and then left-33. Look at the second one…it does not conform

regards

#3

Hi

A red-faced reply.

After much exhaustive searching, I found it. Single comma sitting in the middle of many lines of CSS in amongst all of the figure class IDs.

Problem solved

Thanks

#4

Hi there,

Thanks for writing in.

Would you mind providing the exact URL that has this issue? I can’t find it, the images that are there are <img> instead of <figure>.

Or perhaps it looks like working before due to cache, but now it’s cleared, then it’s displayed differently.
Thanks!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.