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

Subscribe Post Reply

2097

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

Similar topics

very strange Doctype issue

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

HTML / CSS

DOCTYPE problem under Mozilla!

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,...

HTML / CSS

VS2005 and DOCTYPE in Web Forms

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,...

ASP.NET

DOCTYPE Strict uses "correct" box model - so why is 100% width now useless?

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

HTML / CSS

Doctype affecting input field widths; fields extending past table boundaries

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

HTML / CSS

How do I disable content in a text box, only if a radio button hasn't been checked

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"...

HTML / CSS

Text element's width is too wide when doctype is set to XHTML

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

ASP.NET

ModalPopupExtender and DOCTYPE problem

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

ASP.NET

Can someone fix this watermark cut-n-past script by Paul Anderson to work with a Transitional Doctype

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

Javascript

How to calculate date of retirement from date of birth

by: Mushico | last post by:

How to calculate date of retirement from date of birth

Data Management

Access Europe meeting on Wed 4 Oct - The future of Access

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...

Microsoft Access / VBA

How to find best mobile app development company in usa

by: Aliciasmith | last post by:

In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...

Mobile Development

Can faster file sharing be achieved by connecting computers simultaneously via WiFi and LAN cables

by: tracyyun | last post by:

Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...

Networking - Hardware / Configuration

Send Current Object to PDF

by: NeoPa | last post by:

Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...

Microsoft Access / VBA

VBA Class Basics

by: NeoPa | last post by:

Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...

Microsoft Access / VBA

Report value list

by: Teri B | last post by:

Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...

Microsoft Access / VBA

VBA Class Basics (Report Class)

by: NeoPa | last post by:

Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...

Microsoft Access / VBA

Access Europe Meeting - Wed 6 Dec - Streamline Your Import/Export Spec Workflow with VBA Classes

by: isladogs | last post by:

The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

Microsoft Access / VBA