Initial text in editable div moves down after first newline

Question

I have this almost good piece of code. Almost because IE 11 breaks it:

.textarea {
    text-align: left;
    background: white;
    border: 1px solid grey;
    border-style: inset;
    height: 150px;
    overflow-y: auto;
    word-wrap: break-word;
    width: 400px;
}

<div class='textarea' contenteditable='true' id='sec1'>blabla</div>

Why does the text (first line) move down after I hit return? I want either the text to appear at first where it will drop to, or just stay there. This will happen even if the 'first line' is entered manually, with no initial content.

Answer 1

This happens because IE adds p when you press enter. Using Shift + Enter will enter a br like the rest of the browsers.

Alternatively you could style the p elements in there to not have top margin

.textarea {
    text-align: left;
    background: white;
    border: 1px solid grey;
    border-style: inset;
    height: 150px;
    overflow-y: auto;
    word-wrap: break-word;
    width: 400px;
}

.textarea p{margin-top:0;}

<div class='textarea' contenteditable='true' id='sec1'>blabla</div>

But the basic problem is that IE creates different HTML.
Also have a look at avoid ie contentEditable element to create paragraphs on Enter key which comes with its own issues (explained in the answer & comments there)

EDIT from op First thanks for the great answer. Second, this is how I fixed this using JS:

this.iebreak = function (event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        this.field.appendChild(document.createElement("br"));
    }
}

and of course add this if your' on i.e.:

this.field.addEventListener('keydown',function(event){thisObject.iebreak(event);});