Unable to set textarea width with CSS

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.

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?

From stackoverflow

• Maybe you have a user specific css overlay defined somewhere in your browser, because i just tested it and it works as expected: http://jsbin.com/exase/edit (Tested on windows. Maybe Apple native widgets have some quirk?)

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

• This is probably caused by different default margins on the <input> and <textarea> elements. Try using something like this.

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

  derobert : Padding and margin do not add width.

  Andy Ford : well, margin doesn't.

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