Div and textarea behave the same except in Firefox - what to do?

Question

I want to create a textarea which highlights the text beyond a character limit (like the twitter one).

My attempt is here: http://jsfiddle.net/X7d8H/1/

HTM

Answer 1

This has to do with the font size being used. Since the unit used is point (pt), the size calculated is different enough in the browsers to cause the incorrect line wrap.

Try these styles instead:

* {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: normal;
}

body {
    font-size: 1em;
}

JSFiddle

You might have to make changes in the container sizes to accomodate the change in font-size.