How is DocType related to text input width?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • kolik
    New Member
    • Mar 2008
    • 2
    #1

    How is DocType related to text input width?

    Hello. Is there anybody who can give me an explanation, why the actual width of the textboxes in my two examples is different? (Second example is missing a DocType declaration.)

    After that, I would like to know how to set the textbox to the same width as combox if I want to include a DocType declaration?

    Thanks in advance.

    Example 1
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style>
        input { width: 40em; }
        select { width: 40em; }
    </style>
</head>
<body>
    <input type="text"></input>
    <br />
    <select></select>
</body>
</html>
    Example 2
    Code:
    <html>
<head>
    <style>
        input { width: 40em; }
        select { width: 40em; }
    </style>
</head>
<body>
    <input type="text"></input>
    <br />
    <select></select>
</body>
</html>
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      Without a doctype, you are in "quirks mode". This is an error created in ancient times where the width of an element was calculated with margins contained within the total width. Using a doctype changes the rules to "standards mode" and margins are properly calculated outside the total width.

        Comment

        • kolik
          New Member
          • Mar 2008
          • 2
          #3
          Originally posted by drhowarddrfine
          Without a doctype, you are in "quirks mode". This is an error created in ancient times where the width of an element was calculated with margins contained within the total width. Using a doctype changes the rules to "standards mode" and margins are properly calculated outside the total width.
          Thanks for your reply!

          Nevertheless, I have another question: why does it not apply to the select as well? And is there any workaround so that I can make those two inputs the same width?

            Comment

            Previous template Next
            Working...