Monday, October 04, 2010

How to reliably set the width of an input box.

Input boxes are a pain to get the right length.  There are a few ways you can do it, but only one that is cross browser compatible.

The best way to limit the width is to use the display tag or css.

The css method would be to have a style
.width80 {
 width: 80px;
}


There is a tag that is also supported across browsers, the Size tag this is less reliable.

The size lets the browser know that this text box should big enough to hold 30 characters.   The different browsers interpret this differently.  They have their own internal math that they do and the fonts may be different across browsers, so using the size attribute to define the width of a text box may mean that on one screen the text box is too long and messes with the appearance of the screen that you want to design.

Many times I'm trying to align columns with more of a fixed width, using size to set the width of a text box causes me problems across browsers.  Keep this in mind as you style your own input boxes.

No comments: