input text/textarea size

firefox, forms, internet-explorer, internet-explorer-7, internet-explorer-8

Solution

Use the CSS `width` style to give them a physical width in real units:

#id, #longDescr {
    width: 60ex;
}

You'll need to give them each an `id` attribute to match their `name`s before that works.

Unless you give them a width in pixels, you'll also need to ensure that they're using the same font, which by default they won't on many browsers. The easiest way is like this:

#id, #longDescr {
    font: inherit;
    width: 60ex;
}

which will make them use the same font as the rest of the page, but obviously you might want to specify the exact font to use.

Problem

form: ``` <form id="defineForm" method="POST" action="api/test"> <fieldset> <legend>Generale</legend> <input type="text" name="id" size="60" maxlength="60"/> <input type="text" name="descr" size="60"/> <textarea name="longDescr" cols="62" rows="10"></textarea> ``` using `cols="62"` for "longDescr" and `size="60"` for "id" produces area of the same width (oh! oh! surprise!) on IE8: ``` [ text ] [ text ] [ textarea ] [ ] ``` Of course these values proceduces another result on Firefox (two different width as I expect), something like: ``` [ text ] [ text ] [ textarea ] [ ] ``` How can I force the same width, at least on IE7/8 and Firefox, of input text and textareas? EDIT I'm using this CSS: ``` input, textarea { margin: 15px; padding: 3px; display: block; width: 20ex; } ``` but it doesn't works on firefox

Original source