Unable to set textarea width with CSS

Question

I have attempted to use this CSS to set the width of my form elements:

input[type="text"], textarea { width:250px; }

If you look at this Firefox screenshot you'll see that the fields are not the same width. I get a similar effect in Safari.

alt text http://screamingv.com/ss.png

Are there any workarounds?

UPDATE: Thanks for the info so far. I've now made sure padding/margin/border on both elements are set the same. I was still having the problem. The original CSS I posted was simplified... I was also setting the height of the textarea to 200px. When I remove the height styling, the widths match. Weird. That makes no sense.

Browser bug?

Answer 1

Try removing padding and borders. Or try making them the same for both elements

input[type="text"],
textarea {
    width:250px;
    padding: 3px;
    border: none;
    }

Or:

input[type="text"],
textarea {
    width:250px;
    padding: 0;
    border: 1px solid #ccc;
    }

INPUT and TEXTAREA elements often have some padding applied by the browser (varies by browser) and this can make things appear effectively wider than the assigned width.

UPDATE: also box-sizing: border-box; is a handy way to set widths that that padding and border will eat into rather than add onto. See: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

This answer is three years late, but I'm posting it here just in case anyone else is trying to set the width in em's and not pixels and comes across this post (as I just did). Make sure the font-size is the same,

e.g.

input, textarea {
    font-size:12px; 
    width:20em; 
    padding:0; 
    margin:0 
}

otherwise the textarea may be a different size (true on FF12).

Answer 3

Try border:0; or border: 1px solid #000;