ansaurus

Question

Problem with <input type='text' /> and <textarea> width

Answer 1

A:

You could try using this DOCTYPE instead

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

ferrari fan 2008-11-03 18:17:48

Doesn't appear to fix it.

Larsenal 2008-11-03 18:20:04

Not having a DOCTYPE will force the browser into quirks mode, using the old, incorrect box model which doesn't coun't the border as part of the width.

Phil 2008-11-03 18:23:01

Or... `<!DOCTYPE html>` :P

Delan Azabani 2010-07-22 13:26:41

Answer 2

+4 A:

Inputs and textareas both have borders by default

<style>
   .mywidth{ 
     width:100%;
     border:0;
    } 
</style>

will render all the elements within your container.

Update

IE also has left and right padding on each element and the following css fits all the elements within the container in FF3, FF2, Safari 3, IE6 and IE7.

<style>
   .mywidth{ width:100%; border:0; padding-left:0; padding-right:0; }
</style>

However, don't forget that you will probably need a border, and perhaps the padding too, in order to make the fields appear to users as normal. If you set that border and padding yourself then you will know what the difference is, across browsers, between the width of the container and the width you will need to give to the input/textarea elements.

Phil 2008-11-03 18:19:15

Awesome, Phil. I never knew this.

Gabe Hollombe 2008-11-03 18:21:28

Have you tried it? Check IE7. It still bites into the green border on the containing div.

Larsenal 2008-11-03 18:27:45

Apologies, I'm on a Mac! I'll see what I can do in IE7.

Phil 2008-11-03 19:42:48

Answer 3

A:

Add "padding-right:3px;" to the div so it reads as:

<div style="border: 3px solid green;padding-right:3px; width: 100px;">

Because you have added a border to the div that also counts as internal space of the div.

The reason it works without the doc declaration is that the browser does not render the page as transitional XHTML but plain old html which has a different rendering method for div's etc.

Toby Mills 2008-11-03 18:23:08

Answer 4

+1 A:

@Phil has the answer, above.

Incidentally, using Firebug does, indeed, show the default borders on the textarea and input elements. So, using Firebug might have helped.

Gabe Hollombe 2008-11-03 18:23:40

It does look fine in FF, but it's still rendering incorrectly in IE7.

Larsenal 2008-11-03 18:32:36

Answer 5

A:

nice, just tell the with with px and thats all

2009-04-16 10:12:51

Answer 6

A:

xhtml strict code seems to do that with forms. i just make the inputs and textareas stretch at 99% and that seems to work. give that a try.

2009-07-18 15:03:20

Answer 7

+1 A:

I had this same problem. I used the box-sizing property mentioned here:

http://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present#answer-2515439

Here's what it looked like for me:

<style>
   .mywidth{ 
     width:100%;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
    } 
</style>

Bryan 2010-07-22 13:24:40

Perfect! Thanks!!!

Brandon Boone 2010-09-27 01:17:57

ansaurus

tags:

views:

answers:

Problem with <input type='text' /> and <textarea> width

related questions