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.

Filed under: CSS, IE6, IE7

Border: none not working on text input in Internet Explorer

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:

input{
  border:0
}

I have tested this out and it works fine on all the major browsers (IE 6+, Firefox 3+, Safari 4+, Chrome and Opera).

Example

See a working example on the demo page.

Internet Explorer removes input border when using border:none and border-color:transparent

Internet Explorer removes input border when using border: none and border-color: transparent

HTML markup

<input type="text" value="textInput" />

CSS

input{
  border: none;
  border-color: transparent;
}

Side effects

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

Double 50% width float problem in Internet Explorer

Problem

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.

Reason

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.

Example

CSS:

#container{
  width:1001px;
}
.floated{
  width: 50%;
  float: left;
}

HTML Markup:

<div id="container">
  <div class="floated">
  ...
  </div>
  <div class="floated">
  ... 
  </div>
</div>

Browsers affected

You will encounter this bug in IE6, IE7 and it is yet to be fixed in IE8.

Filed under: CSS, HTML, IE6, IE7, IE8

So what’s it about?

Bitesize Bugs is a collection of short articles that expose pesky bugs in front-end web technologies like JavaScript, CSS, HTML and browser behaviors gone bad.
Follow

Get every new post delivered to your Inbox.