How do you make text boxes and text areas render at same width in different browsers? Text boxes use width to define its width unlike text areas they use col's.. And the measurement of cols are different on different browsers. Thus you will get different weird shapes on different browsers. Any thoughts highly appreciated.

you don't even need to use pixels for the width. Any unit will work to define them as being the same width as long as you specify it in the CSS.

The values specified in the HTML only need to be there for the extremely rare person who has CSS disabled. Since inputs generally display reasonably for that situation you would generally only specify a size for textareas in the HTML itself as a default size to display in this rare situation.

The other thing to note is that most browsers now allow textareas to be resized by the person filling out the form so just because you set it to the same width as the inputs doesn't mean it will stay that way if someone decides they want to make it wider.

Any unit will work to define them as being the same width as long as you specify it in the CSS.

I find that other units, like ems and %, get inconsistent results with inputs/textareas, so I tend to use px for these now. If you set both textarea and input to width: 60%, for example, one tends to appear wider than the other. Not sure why ... (that's with font sizes / fonts / padding etc all equalized, too ...)

Felgall is saying that each of your text inputs and textareas ideally should have a unique id, such as

`

Email Address id="email" value="">

Comments id="comm">

`

So then you would style those inputs with something like

`

#email, #comm {width: 500px;}`

It's not necessarily the most efficient option, though, especially if you have a lot of inputs/textareas.

Note that your code should have been this:

`

#myform input[type="text"], #myform textarea {width: 500px;}`

rather than this:

`

#myform input[type="text"], textarea {width: 500px;}`

Yes yes you are dead right.. I should add #myform. Thanks! There is no way to target more than one child element in css without repeating the parent id? Is there something like #myform (input[type="text"], textarea) {width: 500px;} ? lol

No, it's not. <textarea> is an element in its own right, like <input>, or <p>, or <div>. So you target it in CSS as textarea { [I]styles[/I] }. You can't target <textarea> as an <input>, because it isn't one.

No, it's not. <textarea> is an element in its own right, like <input>, or <p>, or <div>. So you target it in CSS as textarea { [I]styles[/I] }. You can't target <textarea> as an <input>, because it isn't one.

Wow.. That is an interesting discovery for me. I made my self count it as an input type. Good tricky quiz problem for newbies this one I guess.

It's not necessarily the most efficient option, though, especially if you have a lot of inputs/textareas.

If you have set the forms up to be accessible by properly labelling all the inputs and textareas and if you do it semantically (that is without making the field itself a part of the label) then you have to give each an id in order to attach the label to the field.

Since the id has to be there anyway to semantically attach the label you may as well use it to simplify your CSS and JavaScript references to that field.

Of course if you have lots of fields in the form then setting them all to a specific width would be easier done using input[type="text"] but most likely you will not want all of them to have the same width and so at least any that are not the same as the majority can be set using their id.