Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

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


View products that this article applies to.

This article was previously published under Q272315

↑ Back to the top


Symptoms

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

↑ Back to the top


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.

↑ Back to the top


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.

↑ Back to the top


More information

Steps to Reproduce Behavior

  1. 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>
    					
  2. View the .htm page on multiple computers, and you will probably see different widths for the textbox from computer to computer.

↑ Back to the top


References

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

↑ Back to the top


Keywords: kbdhtml, kbprb, kbsbnworkshop, KB272315

↑ Back to the top

Article Info
Article ID : 272315
Revision : 2
Created on : 5/12/2003
Published on : 5/12/2003
Exists online : False
Views : 300