By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,879 Members | 1,859 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,879 IT Pros & Developers. It's quick & easy.

How is DocType related to text input width?

P: 2
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.  
Mar 6 '08 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 6 '08 #2

P: 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.
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?
Mar 6 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.