About using left / top / right / bottom in an absolute positioned text box

Question

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

The rendering looks fine on safari / chrome ... but is it a Firefox bug or something that is not standard? Using 100% for width and height sometimes a solution, but not when the element does not completely cover the parent container.

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

This is Chrome (and the desired result)

Firefox (width / height up to 100%)

Firefox (no width / height)

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

Please note that in this example I used a container with a fixed size as a container, but the most interesting and useful case is when the container is elastic.

Answer 1

There is actually a simple alternative, use presentation markup to contain this text area, and then only 100% of the width for the text area itself.

Indeed, CSS is very limited.

Answer 2

This is due to the fact that textarea , unlike, say, a div , has a default width and height :

If the element has a cols attribute, and parsing this attribute value using rules for parsing integers without negation does not generate an error, then the user agent is expected to use this attribute as a presentation hint for the width property on the element, and the value is effective the width of the textarea (as defined below). Otherwise, the user agent is expected to act as if it had a user-level style sheet rule that sets the element width property to the effective textarea width.

The effective width of the textarea element of the textarea element is: size × avg + sbw , where size is the width of the symbol of the elements, avg is the average width of the symbol of the main font of the element, in CSS pixels, and sbw is the width of the scroll bar in CSS pixels. (The property of letter-spacing elements does not affect the result.)

If the element has the rows attribute and parsing this attribute value using rules for analyzing integers without negation does not generate an error, then the user agent is expected to use this attribute as a presentation hint for the height property on the element, the value being the actual height of the textarea ( as defined below). Otherwise, the user agent is expected to act as if it had a style sheet rule at the user agent level that sets the height property in the element to the effective height of the textarea.

The effective height of the textarea of ​​a textarea element is the height in CSS pixels of the number of lines indicated by the height of the character characters, plus the height of the scroll bar in CSS pixels.