Css: issue with width and padding of an input in IE

cssinputwidth

I'm having a problem with widths on input[text] fields in IE, all versions.

I have a div with an explicitly set width of 250px.
In this div, I have an input text field with width set to 100%. This input also has an internal left-padding of 10px.

In IE, it renders the width as 100% + 10px. I cannot figure out a technique for constraining the width to the container.

This problem initially occurred in all browsers, but was very easy to fix in FF, Safari and Chrome by adding max-width:100%. IE6/7 don't support this, while IE8 does but it also still adds the padding to the width.

I understand that IE's box model includes border and margin in its width calculations, so with that given as understood I still can't figure a way around this.

I'm also trying to find a better solution than just setting my input widths to 240px with the padding, because there are various inputs in this form who's containers vary in size and I'd like to find a universal solution.

Here's some code:

<div class="places_edit_left">
    <h4>PHONE <strong>(NOT USER EDITABLE)</strong></h4>
    <input type="text" value="" name="phoneNumber"/>

    <h4>ADDRESS<strong>(NOT USER EDITABLE)</strong></h4>
    <input type="text" value="" name="address"/>
</div>

CSS

.places_edit_left{ width:250px; }
.places_edit_left input{ width:100%; max-width:100%; padding-left:10px;}

Best Answer

Best solution: Real solution

.content {
    width: 100%;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

This one will work for IE8+ and of course all other modern browsers

Ugly solution, but work also in older IE: Here

Related Topic