Jump to content

saila.com

Online media matters

How can I control the size of a text field/input box?

Unfortunately, Netscape 4.x displays form fields using different criteria than the other browsers (Internet Explorer, Opera, and Gecko-based ones).

Because, Netscape 4.x uses the browser’s monospaced font to render text in a text field, and IE uses a variable font—generally sans-serif typeface—it's best to optimize the box for Netscape first.

Once you've done that, use a style declaration (which older Netscapes will ignore) to stretch the box for the others.

Examples:

Netscape's text field at size 8 A plain Netscape 4.7 text input box:
<input type="text" value="netscape" size="8">
IE's text field at size 8, stretched to 90px An IE 5.5 text input box, styled to match the size of the Netscape box (the padding helps vertically align the text):
<input type="text" value="ie" size="8" style="width: 90px; height: 27px; padding-top: 3px;">
IE-version of Netscape box An IE 5.5 text input box, styled to match the size and look of the Netscape box (the border and font simulate Netscape’s):
<input type="text" value="ie" size="8" style="font: 16px 'courier new'; width: 90px; height: 27px; border: 3px inset #DDD;">