Firefox / IE textarea sizing quirk - workarounds?

Try out this code in Chrome, Firefox and IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Textarea problem</title>
<style type="text/css">
html, body {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 0; padding: 0; margin: 0;
}

#container {
  position: absolute;
  top: 4px;bottom: 4px;
  right: 4px;left: 4px;
  background-color: grey;
}

#ta {
  position: absolute;
  bottom: 0; right: 0;
  top: 0; left: 0;
  /*width: 100%; height: 100%;*/
  border: black 4px solid; padding: 0; margin: 0;
  background-color: orange;
  padding: 8px;
}
</style></head>
<body>

<div id="container">
    <textarea id="ta" >This textarea should fill the window. But FF and IE leave the dimensions at the defaults! This happens when the corner offsets are specified; not when width and height are specified. But 100% width and height do not play with the box model when using padding and borders. </textarea>
</div>

</body>
</html>

I notice this happens for inputs as well. They do not respond like ordinary block elements to dimensions implied by top/bottom and left/right.

My workaround is to put the border and padding on the container and set the textarea position to relative and width/height to 100%. But it isn't perfect, because the textarea's scrollbars are then within the padding, which is unacceptable (to me) from a UI perspective.

Is there something I am missing? How can I make top/right/bottom/left work for textareas in FF/IE?

Recommended topics

Hot tags