When you create a div at the beginning of your text, wrapped in a paragraph, something like...
<p>
    <div class=...>... {Image or Embedded video} ... </div>
</p>

then CKEditor modifies it to...

<p>
    &nbsp;</p>
<div class=...>... {Image or Embedded video} ... </div>

This is undesirable, because it adds an extra blank line at the beginning of your post, which does not look good.

At the moment I have to delete the blank line (paragraph) every time, just before clicking on the save button. This is a hassle, because I cannot expect my users to do the same. What if they forget?

When you delete the blank line just before saving, the post displays correctly, but as soon as you edit it, the blank line re-appears again. Also, if you delete it, and then toggle between "Source" and "Wysiwig" mode, CKEditor modifies your code, by removing the <p> and </p> around the div's, and inserts the blank paragraph.

Is there a workaround or fix for this?

Thanks.

Comments

timatlee’s picture

timatlee commented

I see similar behavior with <h2>, <h3> etc.

<h2>Computer Upgrades</h2>
<h3>Outstanding Upgrades</h3>

get converted to 

<h2>
	Computer Upgrades</h2>
<h3>
	Outstanding Upgrades</h3>

Turns out it's a setting in the CKEditor Profile that your user is using.

Expand "Cleanup and output", enable "use custom formatting options" and un-check (or check, whichever works in your case) "Break line after the opener tag" and "Break line before the closer tag".

That addressed my issue; I don't know how it will handle your case with the div's inside the paragraph marker.

jcisio’s picture

jcisio commented

Only inline elements are allowed inside P tag. DIV is a block element. I think CKEditor tries to fix your error.

wwalc’s picture

wwalc commented
Status: Active » Closed (works as designed)

By design, jcisio is right regarding invalid HTML.