Why do text_fields appear smaller in IE than other browsers?

Rails
1

In testing my application on different browsers, I’ve noticed a few
differences:-

a password_field :size=>20 is smaller than a text_field :size=>20 on
Internet Explorer. They are the same on Firefox and Safari. makes my
login box look silly. the same can be seen on the login screen for this
forum. the password box is a little shorter on IE6.

more annoying however is I have a view with two large text_areas
sided-by-side and a text_field above them both spanning the full width
of both text_areas. If I size everything to look nice on Safari and
Firefox, then on IE it looks as though the text_field is too small, only
making it about 2/3rds of the way across.

Its not a major problem, but saying that IE is (unfortunately) the most
widely used browser, I should make things look nice on it. If I make
things bigger to sit nice in IE then they will be too big and look
really silly in IE and Firefox.

As I say, in the grand scheme of things, not a major problem, just a
cosmetic niggly annoyance! If someone has a solution I’d be very
grateful.

–John

2

Maybe a matter of browser defaults? Try

http://www.google.com/search?q=css+remove+all+defaults

Stephan

3

jh100000 wrote:

In testing my application on different browsers, I’ve noticed a few
differences:-

a password_field :size=>20 is smaller than a text_field :size=>20 on
Internet Explorer. They are the same on Firefox and Safari. makes my
login box look silly. the same can be seen on the login screen for this
forum. the password box is a little shorter on IE6.

more annoying however is I have a view with two large text_areas
sided-by-side and a text_field above them both spanning the full width
of both text_areas. If I size everything to look nice on Safari and
Firefox, then on IE it looks as though the text_field is too small, only
making it about 2/3rds of the way across.

Using CSS to set their width. Rails is actually constructing the input
tag with a “width” on it, which from a designers POV, should be the
stylesheet’s job. You could give them fixed widths or a percentage, but
either or this CSS is what you want to give your input fields and
textareas equal size. Make sure to play around with the numbers I gave
…

form input {
width: 200px;
}
form textarea {
width: 300px;
}

4

use css for your input and text_area boxes, to get similar width
like for example :
input, textarea { width:300px}