Geek Answers Handbook

Css: problem with input width and padding in IE

I have a problem with input field width [text] in IE, in all versions.

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

In IE, it displays the width as 100% + 10px. I cannot determine the method for restricting the width of the container.

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

I understand that the IE box model includes the border and margin in the width calculations, so given what is understood, I still cannot figure out how to do this.

I am also trying to find a better solution than just setting the input width to 240px with padding, because there are various inputs on this form whose containers vary in size, and I would like to find a universal solution.

Here is the 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;}
+5
source share
4 answers

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

Awful solution, but work in older IE too: Here

+6
source
+2

, IE . CSS , - PLUS , PLUS - .

, - ( ) 100% . , "", , .

( , , , ),

.places_edit_left{ 
  width:250px; 
  overflow:auto;
}

.places_edit_left input {
  padding-right:0px;
  padding-left:10px;  
  margin: 0 0 0 0;
  border:1px solid black;
  width:auto;
  display:block;
  float:none;
}
0

Note this: http://vitaly.harisov.name/example/broken-input-width-computation-in-msie.html I have implemented the second solution.

0
source

More articles:


All Articles