August 17, 2009 • 9:37 am
Internet Explorer does not correctly apply right padding on text and password inputs.
This problem is clearly visible when placing another element over the input, a common case in search box design patterns.
Have a look at the live code example.
Right padding problem on input elements in Internet Explorer.
The input’s text value slides under the button element in Internet Explorer, while in other browsers it is correctly hidden because of the padding property.
<input type="text" name="textInput" />
Since there’s no obvious solution for Internet Explorer’s right padding problem, a feasible workaround is to visually fake the input. You can do so by wrapping the markup in a container that you can style to look as an input field.
I’ve written a separate article to tackle this workaround for building an inline search box.
Filed under: CSS, IE6, IE7
August 17, 2009 • 9:15 am
Internet Explorer will not remove an input’s border when using the border: none CSS property. In order to achieve this effect for other major browsers as well as for IE you need to also add border-color: transparent.
Update April 2010
As noted in allex’s comment below there is a simpler solution:
I have tested this out and it works fine on all the major browsers (IE 6+, Firefox 3+, Safari 4+, Chrome and Opera).
See a working example on the demo page.
Internet Explorer removes input border when using border: none and border-color: transparent
<input type="text" value="textInput" />
Be careful when using border-color: transparent with border: none because they will impact the input’s box model by removing the border’s dimensions.
This will alter the input’s relationship, like vertical positioning, with surrounding elements.
Filed under: IE6, IE7
August 11, 2009 • 8:54 pm
Two floated 50% width elements in a container that has an odd width will clear each other in Internet Explorer. One of them will always clear and move under to the next level.
This issue is due to IE’s way to calculate sub-pixel dimensions. Internet Explorer will approximate to the next higher integer any half-pixel dimension.
If you are dealing with two floated elements 50% in width that are nested in a 1001px width container, IE will not work with two 500.5px elements but two 501px ones. This is the reason why the last element in the sequence will always clear the other one, because they will not both fit the container’s given dimension.
You will encounter this bug in IE6, IE7 and it is yet to be fixed in IE8.
Filed under: CSS, HTML, IE6, IE7, IE8