How to make a textbox and a textarea same width cross-browsers?

Question

Setting the width of both the textbox (ie. input type="text") and the textarea to 500px doesn't work in IE6 and Chrome, only works fine in FF2 (haven't tested other browsers), IE and Chrome add two pixels to the textbox.

Padding and margin is set to 0 on all elements using

*
{
margin: 0px;
padding: 0px;
}

Changing the doctype from xhtml 1.0 transitional to strict didn't work too.

Answer 1

Try

input{
border:none;
}

Answer 2

You might have some luck using a set of reset styles in your CSS. They go a long way to eliminating the cross-browser differences between the way elements are rendered.

Eric Meyer (one of the web's best minds on CSS) describes reset styles and why he uses them here -- with his latest version here.

That said, without knowing the overall effect you're trying to achieve, form elements are notoriously difficult to style in a way that is perfectly consistent across browser platforms. Best of luck. :)

Answer 3

You need to explicitly set a border of 1px and make the width 498px, or make the border 0 and the width 500px, although the latter will make the input impossible to see unless you know it's there, so from there it's just a styling issue.

Answer 4

Do it in Flex ;)

Answer 5

I also think that the problem is in border. Try defining the border style specifically for inputs/textarea together with their width.

input, textarea{ border:1px solid grey; width:498px; }

Also take a look in the source if input/textarea is not defined anywhere else or in their own tag (e.g. size or rows/cols). Other option when IE messes around is using special css file for it. However IMHO it shouldn't be necessary in your case.

Answer 6

I would recommend first to avoid that "star" reset rule, as it only brings problems down the line. Instead prefer a specific reset like

ul, ol, p, blockquote, h1, h2 /etc.../ { margin:0; padding:0; }

FORM ELEMENTs, in fact, is where the star rule does the most damage.

AFAIK, setting padding and width explicitly to a textarea and an input element, will give the exacts same pixel width in all browsers.

IE6 does add a 1px margin to the TOP and BOTTOM I believe, not the sides.

Here's an example of a RESET rule taht does'nt break the default properties of form elements:

/*---------------------------*/
/* Base rules & reset */
/*---------------------------*/

body { 
    font-size:11px; line-height:1.2em; font-family:Verdana, Arial, sans-serif; 
    margin:0; padding:0; 
    background:#fff url(/01/images/cassis/body-bg.gif) repeat-x 50% 0;
    color:#303030;
}

p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; }
ul, ol, li { list-style:none; }
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; }
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; }
img { display:inline; }

/* cross-browser clearing of floats (no extra space in IE) */
div.clear { clear:both; overflow:hidden; height:0; }

These are just random, but you get the idea. Don't clear margin and padding on everything, it's much safer to clear what you need to, and leave the browser defaults elsewhere.