473,320 Members | 1,865 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 2104
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

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

Similar topics

9
by: Robert Misiorowski | last post by:
Hello, I have a very perplexing (at least to me) problem that hopefully someone can help me with. I'm making a site with a 3 column layout. In the middle column (my fluid column) I am trying to...
6
by: Patrick | last post by:
Hi I am fairly new to CSS and the web.I am trying to build a site more to practice my skills than for the site itself. I have been focusing on CSS and try my best to make it work in I.E 6.0,...
6
by: Chris Botha | last post by:
I am porting an existing 2003 project to 2005. Yesterday I found that some of my Java script did not want to work. After eventually examining the HTML view of the new and old form for differences,...
50
by: Shadow Lynx | last post by:
Consider this simple HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>...
3
by: cbradio | last post by:
Hi, I am having trouble developing a form in a restricted environment. My sample code is found below my message (sorry I don't have a URL). Basically, without a doctype, the form displays properly...
3
w33nie
by: w33nie | last post by:
I want to disable the text boxes, captain_name and captain_email, but only if the radio button, captain_guarantee, has NOT been checked. how do i do this? <form name="formTeamApplication"...
2
by: mszanto | last post by:
I've read a bunch of posts on this and none of the answers are legitimate (IMHO) so I thought I'd throw it out there again. Using the html code below, if you set the doctype to HTML 4.0, and...
0
by: =?Utf-8?B?SGFyZHkgV2FuZw==?= | last post by:
Hi all, I have a web form, and I want to use ModalPopupExtender from Ajax Toolkit. I am using IE 7.0 as browser, VS 2005 and Ajax and Ajax Tool Kit installed. Windows XP Pro. Now I have a...
1
by: rfr | last post by:
Apparently the Transitional Doctype kills this script because the script does not make proper use of units like "px". It works well without a doctype statement. But once someone adds a...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.