doctype html causing form input field to be cut off

StackOverflow https://stackoverflow.com/questions/18772701

  •  28-06-2022
  •  | 
  •  

Question

I noticed a problem on one of my html forms where the text input field was being cut off. I narrowed down the cause of it to the <!DOCTYPE html> directive that we're using at the top of the page.

When I exclude the <!DOCTYPE html> directive, the inputs in the scenario below render correctly, meaning that the text input field is drawn in its entirety. But when I load this snippet as is (with <!DOCTYPE html>), the right side of the text input is cut off.

Can anyone explain to me what's going on here? I notice this problem in IE9, Firefox 23 and Chrome 29.

Here's the snippet:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#testDiv span {
    display: block;
    overflow: hidden;
    padding: 0 5px;
}
#testInput {
    width: 100%;
}
#testButton {
    float: right;
}
</style>
</head>
<body>
    <form id="testForm" method="post">
        <div id="testDiv"> 
            <button id="testButton">Apply</button>             
            <span><input type="text" id="testInput" /></span>
        </div>
   </form> 
</body>
</html>
Was it helpful?

Solution

As it turns out, the answer lies in the differences between HTML4 and HTML5, specifically the CSS box-sizing (-moz-box-sizing, -webkit-box-sizing) property. In HTML4, the box-sizing property defaults to "border-box". In HTML5, the box-sizing property defaults to "content-box".

border-box means that the border and padding are included in the box's width. content-box means that the border and padding are extra on top of the width of the box. So where a box would fit nicely between elements in HTML4, its right side border could be cut off in HTML5 because its width does not account for the 1px border.

Solution: add "box-sizing: border-box;" (and related rules for -moz and -webkit) to CSS rules.

OTHER TIPS

I think it is how the doctype interprets the width:100%, so there's no space left for that right border. You could change it to width:99.9%, if that would meet your needs.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top