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?