About using left/top/right/bottom on absolute positioned textarea

Question

I tried setting position:absolute and then left, top, right and bottom to fixed values in pixels, but unless I also set width and height I cannot get it to work properly on Firefox 11.

The rendering looks ok on safari/chrome... but is this a Firefox bug or something that isn't indeed standard? Using 100% for width and height is sometimes a solution, but not when the element is not completely covering the parent container.

See http://jsfiddle.net/EjS7v/6/

This is Chrome (and the desired result)

Firefox (width/height to 100%)

Firefox (without width/height)

Are there alternatives to using Javascript to compute width and height at runtime?

Note that in this example I've used a fixed size div as container, but the most interesting and useful case is when the container is elastic.

Answer 1

Actually there's a simple alternative, use presentational markup to contain that textarea and then just 100% width height for the textarea itself.

Indeed, CSS is very limited.

Answer 2

This is because textarea, unlike, say, a div, has a default width and height:

If the element has a cols attribute, and parsing that attribute’s value using the rules for parsing non-negative integers doesn’t generate an error, then the user agent is expected to use the attribute as a presentational hint for the width property on the element, with the value being the textarea effective width (as defined below). Otherwise, the user agent is expected to act as if it had a user-agent-level style sheet rule setting the width property on the element to the textarea effective width.

The textarea effective width of a textarea element is size×avg + sbw, where size is the element’s character width, avg is the average character width of the primary font of the element, in CSS pixels, and sbw is the width of a scroll bar, in CSS pixels. (The element’s letter-spacing property does not affect the result.)

If the element has a rows attribute, and parsing that attribute’s value using the rules for parsing non-negative integers doesn’t generate an error, then the user agent is expected to use the attribute as a presentational hint for the height property on the element, with the value being the textarea effective height (as defined below). Otherwise, the user agent is expected to act as if it had a user-agent-level style sheet rule setting the height property on the element to the textarea effective height.

The textarea effective height of a textarea element is the height in CSS pixels of the number of lines specified the element’s character height, plus the height of a scrollbar in CSS pixels.