input text/textarea size

Question

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

Answer 1

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 names 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.

Answer 2

Create an ID for each field, then using CSS set the display to inline-block, and the width to whatever you want.

I'd also suggest adding <label> elements for the fields. I believe this will give you a browser-supported tooltip, as well as better usability for a screenreader.