CSS: how to set the width of form control so they all have the same width?

Posted by Alessandro Vernet on Stack Overflow See other posts from Stack Overflow or by Alessandro Vernet
Published on 2010-05-22T00:20:28Z Indexed on 2010/05/22 0:30 UTC
Read the original article Hit count: 281

Filed under:
|
|

Consider the following example:

<!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" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            div { width: 15em }
            input, textarea, select { width: 100%;
                -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
        </style>
    </head>
    <body>
        <form>
            <div>
                <input value="Input">
            </div>
            <div>
                <textarea>Text area</textarea>
            </div>
            <div>
                <select>
                    <option>One</option>
                    <option>Two</option>
                    <option>Three</option>
                </select>
            </div>
        </form>
    </body>
</html>

On browser that support the border-box box sizing, this is rendered as I want:

Correct rendering

On IE 6/7, however, this is rendered as:

IE 6/7 rendering

How can I get the same rendering in IE 6/7 that I get in other browsers, without resorting to setting sizes in pixels?

© Stack Overflow or respective owner

Related posts about border-box

Related posts about ie