Consistently sizing a TEXTAREA under IE, FF, Safari/Chrome

Question

I have a TEXTAREA that needs to fit into a space whose size is not pre-determined (is a percentage of the screen size). I can get good results if FireFox by setting the regular CSS properties:

#container { width: 70%; height:70% }
#text_area { width: 100%; height: 100%; margin: 0; padding:0; }

However in IE 6 and 7 I get different, odd results. In IE6 the textbox appears to have padding to both the left and the right, pushing the size of my container to grow. In IE7 the textbox has padding to the left, but does not make the size of the container grow - instead its right edge pushes outside of the container.

The height setting seems to have no effect in either IE6 or IE7; the TEXTAREA is 2 rows long in both cases, ignoring the height:100% directive.

Is there a consistent way to size a TEXTAREA across browsers?

Is there a way to get rid of the padding to the left of the TEXTAREA?

[Update] Using position:absolute; removes the padding, but the width:100% is still screwed up. IE7 seems to calculate the 100% width too large resulting in a textarea that spills out of the div that contains it.

I'll create a stand-alone example if I get a chance...

Answer 1

There may be a sneaky CSS way to achieve this that I don't know about, but in my experience this is one of the things where using a bit of Javascript is justified.

You could get the height you need (of the current window I presume) using JQuery or Prototype, or in pure Javascript: Get the height of the current document and then

document.getElementById("text_area").style.height = calculated_height+"px";

The left hand padding I find odd, though. Can you post an example?

Answer 2

Maybe it is because of the IE6/7 quirks mode, try using one of these Doctypes: http://www.alistapart.com/articles/doctype/

Answer 3

I've seen this problem with ASP.Net textbox controls also in IE7. I couldn't remember where I found a solution (but props to the person that found it), but I was having the same problem where the textbox with width="100%" would actually break the DOM and my entire content section would "spill" onto a neighboring section (such as a table based navigation).

The solution I eventually adopted was to wrap the asp:Textbox inside its own table and set the "table-layout:fixed; width: 100%" property and on the textbox/textarea "position:relative; width: 100%;" so the block would look like this:

<table style="width: 100%; table-layout: fixed;">
  <tbody>
    <tr>
     <td>
      <asp:Textbox id="txtMyTextbox" runat="server" Width="100%" style="position: relative;"/>
     </td>
    </tr>
   </tbody>
 </table>

This is not the prettiest solution, but I have verified that it does work cross all browsers. I have a write-up on this issue at http://flexadmiral.com/blog/post/2010/08/09/IE7-Bug-ASPNet-Textbox-Width3d10025-causes-the-component-to-spill-out-of-its-container.aspx.

Hope this helped.