How to force a line break after each image in Safari Reader?

Question

I was unable to activate Safari Reader in a local HTML file, so I cannot give you a running example but only describe my problem:

The markup of my blog posts is basically this:

<div class="post">
 <div class="post-header">Hello, World</div>
 <div class="post-body">
  <p>Look at this picture:</p>
  <p><img src="http://37prime.com/news/wp-content/uploads/2008/03/safari_icon.png"/&gt;&lt;/p&gt;
  <p>Isn't that a nice picture?</p>
 </div>
</div>

This looks as expected in all browsers, including Safari. In Safari Reader however, the third paragraph "Isn't that a nice picture?" is floating around the image, instead of being on a paragraph of it's own.

Has anybody experienced a similar problem?

Answer 1

Yes, you could try to put a <br> line break in after "picture:" I can't verify that it works but in theory it world fix the problem by using a tag made just for line breaks (shrinking the chance that it's re styled)

Answer 2

Maybe you should try to float the img to left:

.post-body img{
     float:left;
}

And don't forget to give a width and height to the image.

Also you can use clear:both too.

.post-body img{
     float:left;
     clear:both;
}

Answer 3

.post-body img {
  display: block;
}

should do the trick.

Answer 4

Use the <br/> tag at the end/after each line