PRB: Size Attribute Does Not Control the Width of <INPUT> Text Element (272315)

The information in this article applies to:

Microsoft Internet Explorer (Programming) 4.0
Microsoft Internet Explorer (Programming) 4.01
Microsoft Internet Explorer (Programming) 4.01 SP1
Microsoft Internet Explorer (Programming) 4.01 SP2
Microsoft Internet Explorer (Programming) 5
Microsoft Internet Explorer (Programming) 5.01
Microsoft Internet Explorer (Programming) 5.01 SP1
Microsoft Internet Explorer (Programming) 5.5

This article was previously published under Q272315

SYMPTOMS

When you use the size attribute to control the width of a textbox (

CAUSE

The size attribute specifies how many characters to display, not the overall width of the element. The width of the element is determined by a combination of the size attribute, font, and font size that are set by the page. If you do not specify the font, the default font that is selected for the browser is used to determine the width. Even if you specify the font and font size for the page, you cannot guarantee consistent widths, because different users may have different versions of the same font installed.

RESOLUTION

The best way to ensure the width of an input element is to specify the width of the element either in pixels:

<input type="text" style="width:20px;font-family:arial;font-size:10">

or by a percentage:

<input type="text" style="width:100%;font-family:arial;font-size:10">

NOTE: The percentage is relative to the container of the element.

MORE INFORMATION

Steps to Reproduce Behavior

Paste the following HTML code in a new .htm file:

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE=JavaScript>

   function showWidth()
    {
      var str  = "Input box width: " + test.clientWidth + "px.";
      str += "<br>Font: " + test.currentStyle.fontFamily;
      alert(str);
    }

  </SCRIPT>
 </HEAD>

 <BODY onload=showWidth()>

  <INPUT id="test" type="text" size="10" style="font-family:arial;font-size:10">

 </BODY>
</HTML>

View the .htm page on multiple computers, and you will probably see different widths for the textbox from computer to computer.

REFERENCES

For more information on the width property and attribute, see the following Microsoft Developer Network (MSDN) site:

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/width_2.asp

Modification Type:	Major	Last Reviewed:	5/12/2003
Keywords:	kbDHTML kbprb kbSBNWorkshop KB272315