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

Expand|Select|Wrap|Line Numbers

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

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

    <style>

        input { width: 40em; }

        select { width: 40em; }

    </style>

</head>

<body>

    <input type="text"></input>

    <br />

    <select></select>

</body>

</html>

Mar 6 '08 #1

Follow Post Reply

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

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