<!Doctype HTML> Width Render Issue Input Element

!doctype html width render issue input element

When you don't have that doctype, your page is rendering in Quirks Mode.

In Quirks Mode, the border and padding of the input are counted inside the 300px width.

When you add the doctype, your page is rendering in Standards Mode, and the border and padding are no longer part of the 300px - that's where the "extra" 4px is coming from.

See here: http://www.quirksmode.org/css/box.html

The easiest way to "fix" this for modern browsers is to use box-sizing: border-box:

input
{
    width: 300px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Or, you can explicitly set the padding and border-width yourself, to make sure the sum of the values of padding, border-width and width add up to 300px.

!DOCTYPE html changes input textbox size (height and width)

Add the code below to your lower input to include padding and border in the element's total width and height. This should solve it.

box-sizing: border-box;

Problem with input type='text' / and textarea width

Inputs and textareas both have borders by default

<style>
   .mywidth{ 
     width:100%;
     border:0;
    } 
</style>

will render all the elements within your container.

Update

IE also has left and right padding on each element and the following css fits all the elements within the container in FF3, FF2, Safari 3, IE6 and IE7.

<style>
   .mywidth{ width:100%; border:0; padding-left:0; padding-right:0; }
</style>

However, don't forget that you will probably need a border, and perhaps the padding too, in order to make the fields appear to users as normal. If you set that border and padding yourself then you will know what the difference is, across browsers, between the width of the container and the width you will need to give to the input/textarea elements.

Form input height different depending on html doctype

You have two different doctype definitions:

<!DOCTYPE html>

which triggers HTML5 standards (which is not technically a standard yet, so it just triggers standards mode in most modern browsers)

and

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

which triggers HTML4 Transitional, or quirks mode

The different modes have different rendering, as you are observing. Quirks mode is used to maintain backward compatibility with older browsers that don't abide by standards.

Specifically what you are seeing is the difference in the way the two modes handle the box model. So, to fix it in HTML5/Standards mode, you can just remove padding from your input elements.

!DOCTYPE html CSS issues

height cannot be in %, you have to give it manually like height: 400px;.

Css styles not applied properly,if use DOCTYPE

The problem is that the div is set to 100% of 100% (the body) this makes sence to us but not to the browser. If you set the body position to absolute and set it's top, bottom, left, right to 0, you get the same effect and the div's height setting will work the way you expect. Here's the code.

<!DOCTYPE html>

<html> 
<head>
<title>Test</title>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:green;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

Why HTML input element gets resized by the browser?

The meaning of 'width' depends on the page's box model. Traditionally width has included paddings and borders, but the standard model now excludes them.

If you do not have a correct doctype in your html, then most browsers would default to traditional box model, and you would be left with a box of 147px. Adding a doctype would fix it and force other layout to be standard-compliant.

<!DOCTYPE html>
<html><head><body>
<div id="search" style="background-color:#000; height:100px;">
    <input style="  background: none repeat scroll 0 0 #FFFFFF;
                    border: medium none;
                    border-radius: 5px 5px 5px 5px;
                    color: #666666;
                    float: left;
                    line-height: normal;
                    margin: 6px;
                    padding: 6px 27px 6px 6px;
                    width: 180px;
                    z-index: 40;"
            type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div></body></html>

!DOCTYPE html breaks margin element

The <!DOCTYPE html> should be used on top. Below the <!DOCTYPE> comes the <html> tag.

<!Doctype HTML> Width Render Issue Input Element