IE6 absolute positioning in parent with odd width

One of the guys I work with found an interesting browser issue this week. He was using absolute positioning to position an element to the right of a box which was an odd number of pixels across. He noticed that in IE6 the child element was one pixel away from where it was in other browsers.

In IE6

In IE7

Simple test case

Here’s a simple example of the HTML:

  1. <div id="container">
  2.     <div id="inside">
  3.     </div>
  4. </div>

Here’s a simple example of the CSS:

  1. #container
  2. {
  3.     position: relative;
  4.     width: 301px;
  5.     height: 200px;
  6.     background-color: pink;
  7. }
  8. #inside
  9. {
  10.     position: absolute;
  11.     width: 20px;
  12.     height: 20px;
  13.     right: 0px;
  14.     _right:1px;
  15.     background-color: yellow;
  16. }

Complete example

Workaround

If you can’t use an even number of pixels for the width of the parent box, just to use the underscore IE6 hack to provide an adjusted right value just for IE6 that all the other browsers will ignore:

  1. #inside
  2. {
  3.     position: absolute;
  4.     width: 20px;
  5.     height: 20px;
  6.     right: 0px;
  7.     _right:1px; /* for IE6 */
  8.     background-color: yellow;
  9. }
Posted on 07 Sep 09 by Helen Emerson (last updated on 07 Sep 09).
Filed under Browser quirks, CSS