Firefox does not allow empty content area

Question

Firefox version 30.

The following code works fine in chrome, and I can start typing in the paragraph.

But this does not work in firefox, any hints what is wrong.

<div>
    <div>
      <span contenteditable="false">Not editable area</span>
        <p contenteditable="true"></p>
    </div>
</div>

JSFiddle - http://jsfiddle.net/THPmr/30/

Answer 1

Chrome seems to automatically assign some height to the content paragraph, but Firefox doesn't. A simple solution is to add a minimum height to the paragraph.

<p contenteditable="true" style="min-height:15px"></p>

Now we don’t need to worry about extra spaces and unnecessary br tags

Answer 2

CSS solution:

p[contenteditable] { min-height: 1em}
/* or more generic for any element*/
[contenteditable] { min-height: 1em}

DEMO