pixel perfect cross browser form input elements?

[heavenly_blue]

I'm using <input> <select> and <textarea> on a form.

Using CSS I specified the width of each of those elements.

I want them to appear exactly the same width in all browsers.

Right now, I think it's impossible.

Should I just model it for IE, since that's what 95% of the people are using anyways?

In IE 6, if I use this...

input, textarea{width:16em;}
select{width:16.4em;}

...everything is the same width. In firefox, the select and textareas are different widths (off by a few px).

[NogDog]

Don't know if it will ever be perfect since the graphic element rendering is not specific to the HTML standard and is instead browser-specific. You might try adding explicit margin and padding definitions to each element's style as well (and perhaps border-thickness as well where applicable) to ensure each browser is using the same value.

[heavenly_blue]

Thanks, that helped a bit.

Using...

input, textarea{margin:0 0 0 1em; padding:0; width:16em;}
select{margin:0 0 0 1em; padding:0; width:16.3em;}

...makes it so pretty much everything lines up in FireFox and IE 6.

The only thing that's off now is the <textarea> in FireFox.