Mozilla 3.0.8 and Chrome height in em bug workaround.

Question

I've got a textarea inside a div:

<div id="textareawrapper">
  <textarea id="chat"></textarea>
</div>

...and CSS:

#textareawrapper {
    border 1px dashed pink;
    margin:0;padding:0;
    position: absolute;bottom: 0em;left:7.5em;right:7.5em;height: 7em;
}
#textareawrapper textarea {margin:0;padding:0;width: 100%;height:7em;}

IE 7 renders it fine: the height of the textarea is equal to the height of the wrapping div. In Mozilla and Chrome the the wrapping div is rendered 7em high, but the textarea is some 20-25px not hight enough, so that there is a gap between the bottom of the textarea and the bottom border of the div. Does any one know how to fix this?

Answer 1

The textarea is using a different font by default, so the size is different (as ems relate to the text size).

Add this:

#textareawrapper textarea { font-size: 100%; font-family: inherit; }

Tested & working in FF3