468,316 Members | 1,921 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,316 developers. It's quick & easy.

How is DocType related to text input width?

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
2 1953
drhowarddrfine
7,435 Expert 4TB
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
kolik
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.

Similar topics

9 posts views Thread by Robert Misiorowski | last post: by
6 posts views Thread by Patrick | last post: by
6 posts views Thread by Chris Botha | last post: by
reply views Thread by =?Utf-8?B?SGFyZHkgV2FuZw==?= | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.