Textarea width in Chrome not being applied properly

Question

Contact box in the footer the textarea and input boxes are in a div 310px wide.

http://www.bantros.net

They have been set to be 308px wide with 1px border. In IE9, Firefox and Opera everything is the same width but in Chrome (my default browser) the textarea overflows unless the width is set to 304px.

Using Inspect Element I can it reports it as being 314px wide but I'm not too sure why it is doing this. Any info or help will be appreciated, thanks

Answer 1

There is a browser-applied padding: 2px. Apply padding: 0.

.form1 textarea, .form1 input {
    padding: 0;
}

This sort of issue can be solved using a CSS reset, btw.

Answer 2

One thing I can see, which I believe is the source of the problem: In textarea, chrome puts a 2px padding for left and right. In input chrome puts 0px padding on left and right.

If you override that it should be fine.