Connecting Tech Pros Worldwide Help | Site Map

How is DocType related to text input width?

Newbie
 
Join Date: Mar 2008
Posts: 2
#1: Mar 6 '08
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
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4.     <style>
  5.         input { width: 40em; }
  6.         select { width: 40em; }
  7.     </style>
  8. </head>
  9. <body>
  10.     <input type="text"></input>
  11.     <br />
  12.     <select></select>
  13. </body>
  14. </html>
  15.  
Example 2
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.     <style>
  4.         input { width: 40em; }
  5.         select { width: 40em; }
  6.     </style>
  7. </head>
  8. <body>
  9.     <input type="text"></input>
  10.     <br />
  11.     <select></select>
  12. </body>
  13. </html>
  14.  
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,561
#2: Mar 6 '08

re: How is DocType related to text input width?


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.
Newbie
 
Join Date: Mar 2008
Posts: 2
#3: Mar 6 '08

re: How is DocType related to text input width?


Quote:

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?
Reply


Similar HTML / CSS bytes