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"/></p>
<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?
To do a line break in HTML, use the <br> tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag.
To add spacing between lines or paragraphs of text in a cell, use a keyboard shortcut to add a new line. Click the location where you want to break the line. Press ALT+ENTER to insert the line break.
The BR tag is used to force line breaks within text. Normally, linebreaks are treated as a space by browsers (except inside the PRE tag). The optional CLEAR attribute is used when you have an IMG image in your text. If that image uses ALIGN=LEFT or ALIGN=RIGHT, the text will flow around it.
The line break tag is the <br> tag in HTML and <br /> in XHTML. A br tag will insert a line break which means the text/image following the tag will be moved to the next line when displayed in the browser.
.post-body img {
display: block;
}
should do the trick.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With