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.

Demo

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>

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.

About these ads

Filed under: CSS, IE6, IE7

One Response

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: