Bitesize Bugs

Padding right problem on text input in Internet Explorer

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.

Padding right problem on input elements in Internet Explorer.

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>




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

One Response

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: