Question

Okay, so I am in the process of designing a website which has a login form at the top-right corner of a webpage. I set the size attribute of its input fields and I am getting some interesting results. Below is a group of screenshots that I threw together. I even stacked them for you all. I am even throwing in a jsFiddle for you all. So four things:

• I aligned them based on the bottom right hand corner of the password input field in the stacked image. Don’t ask why.
• I design with borders on everything until the layout is correct, then I remove them and add the colors and images and whatnot.
• The IE 9 screenshot is based on Adobe’s BrowserLab since I am working on a Mac.
• Note that the WebKit-based browsers (Safari and Chrome) render the same size.

I could not find anything to reveal what is happening after a series of searches. Maybe it’s because it’s hard to word a question like this into simple search terms (or at least for me)…

With all of this said, my question is why is are the input fields rendered so differently, and most importantly, how can I remedy this (without JavaScript or the dependence on User Agents preferably)?

Answer 1

The size attribute sets the number of characters that the field will display (in the case of text and password fields). Different browsers use different default fonts, font sizes, and ppi measures, meaning that you get massively different sized (in pixels) fields.

Also, as the spec says, this is merely the “initial” width of the control, and the browser is free to resize the control if it decides it needs to in the course of reflowing the entire page.

To even have a hope of making this field close to the same (pixel) size on different browsers, you’ll have to style it with CSS. That being said, there is probably a good reason that each of these are different sizes – mostly having to do with default fonts – and if you pixel-restrict the size of the field that means some browsers will display more actual text than others.