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

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 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. :)