Consistently sizing a <textarea> under IE, FF, Safari/Chrome_问答_开发者

I have a <textarea> that needs to fit into a space whose size is not pre-determined (i开发者_运维问答s 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 to be 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...

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 HERE.

Hope this helped.

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?

In order to solve this kind of problems, one has to think about how percentage is handled in the browser. First of all.... percentages don't exist, they are converted to pixels at some point. The steps are 1) browser renders all tags, 2) browser measures outer, parent, percent-sized boxes to get its size in pixels, and sets the size of the child boxes according to their percentage size. I think the first thing to verify is the size of textarea's parent box, and it's parent box, and so on. This can be done by checking the "Layout" information in Firebug and IE Developer Toolbar, and find out what's measured differently in both browsers. Once you find that element (or elemets) css can be adjusted to consider them.

Have in mind that percentage sizing considers the width and height of parent box content to size the child element and not padding. So, if a parent box width is 500px and has 100px padding, a child element with 100% width will be 500px and the 100px padding will be around it, and both elements will take 700px of your screen.

Try

adding a min-height:100% on the text area css. On the div containing the absolute positioned , set the position to relative on your css.

also use transistional Doctypes instead of strict, while your at it. Make sure there are no unclosed tags. I would be better if you can make the page XHTML or HTML standard compliant so that you will have less problems with cross browser compatibility.

Try adding display:blockand border:0 to your #text_area. The former should take care of the height-issue and the latter prevents the width:100% to spill over.