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