Unexpected text position outside of <p>

[lele_ballack]

There is something I can't figure out about about text fields and their position in the HTML code. 

There is a field which is a multi-language text area with CKEditor called "a_01_text". 

<p class="wow fadeInUp animated" data-wow-delay="1.3s"><?=$page->a_01_text?></p>

After filling the field with "Some text" through PW, the result in HTML code is totally different than what I expected as my text is actually outside of the designated <p>: 

<p class="wow fadeInUp  animated" data-wow-delay="1.3s" style="visibility: visible; animation-delay: 1.3s; animation-name: fadeInUp;"></p>
<p>Some text</p>

I was getting crazy trying to understand why my CSS rule wouldn't work on this text, until I realised this. It happens only with textareas, not with simple texts.

Can anyone please explain why this happens and how I can fix this? 

[teppo]

If you view the page source (right-click + view page source, i.e. not the "formatted" version you see in dev tools), is that actually what you see there as well?

Since a_01_text is a CKEditor field it'll return markup, and in this case that markup probably consists of a paragraph (<p>Some text</p>). Since you can't have a paragraph inside a paragraph, your browser might be "correcting" it to this. How 'bout converting that wrapping <p> element into a <div> instead?

<div class="wow fadeInUp animated" data-wow-delay="1.3s"><?=$page->a_01_text?></div>

 

[lele_ballack]

Thank you @teppo! I think you nailed it! 

If I look into the page source, it happens exactly what you predicted as there is <p> inside my original <p>: 

<p class="wow fadeInUp animated" data-wow-delay="1.3s"><p>Some text</p></p>

I could use your solution replacing the original <p> into a <div>, but I'm wondering if there is another solution as I'm doing a quick job and using a template which means I'd have to change most of CSS around the whole website in this case.  Any other way of fixing this?

[LuisM]

@lele_ballackthe only fix would be to not use CKEditor for this field, as CKEditor will output Markup. Whenever you put CKEditor Markup inside a <p> Element you will get the same result. 

As a reminder: Whenever outputting CKEditor, use a proper div, article, aside element to wrap the output. 

 

[lele_ballack]

Thank you @LuisM! I think I'll remove the CKEditor where possible and play with CSS to render the rest of the elements in the same way. 

I'll definitely keep the reminder for the next projects! ?