CODEWITHSUNDEEP
google-chrometextareawidth
Bantros
Bantros

Reputation: 295

Textarea width in Chrome not being applied properly

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

Upvotes: 4

Views: 4133

Answers (2)

yydl
yydl

Reputation: 24474

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.

Upvotes: 3

Matt Ball
Matt Ball

Reputation: 359786

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.

Upvotes: 8

Related Questions