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.
Demo
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.
Code Example
HTML markup
<input type="text" name="textInput" /> <button type="submit">Search</button>
CSS
input{
padding-right:30px;
...
}
button{
margin-left:-30px;
...
}
Workaround
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.
[...] Older » [...]