Causes of IE miscalculating "left:auto"

For this IE5-7/Win issue there are three common causes. We'll address two of them here because they're similar. (I've encountered both of them countless times when working with Suckerfish drop down menus.) The first common cause is the text-align property not being set to "left". The second is an inline or floated element immediately preceeding the absolutely positioned element.

The sub-menu should be under the first top-level item for each example. If you view this page in IE7 you'll see that in the first example the sub-menu appears under the second item. (It would be the same in IE5-6/Win too, except IE5-6/Win don't like it when an absolutely positioned element immediately follows a floated element. Apparently clear:both fixes that issue though, so the 3rd and 5th examples show the same in IE5-7/Win — the 4th is the same in them because the link is not floated.)

• item 1
  • item 1
  • item 2
  • item 3
• item 2
• item 3

The fix for the first issue is to give the top-level list-items text-align:left and apply the text-align center to the anchors themselves. (This doesn't appear to have an affect, but as you can see in the next two examples, when a fix is applied for the other cause, but not this one, the left edge of the absolutely positioned element is centered in the list-item. And you can see in the 5th example that when a fix to both issues is applied the example is displayed correctly.)

• item 1
  • item 1
  • item 2
  • item 3
• item 2
• item 3

Oddly enough the fix for the when the link is floated is to give the sub-menu clear:both, which shouldn't have an effect on absolutely positioned elements, but does in IE5-7/Win.

• item 1
  • item 1
  • item 2
  • item 3
• item 2
• item 3

Alternatively to giving clear:both to the absolutely positioned element, one could simply give the link display:block instead of floating it. However, if the list-item doesn't have a set width, display:block will trigger a bug in IE6 as a result.

• item 1
  • item 1
  • item 2
  • item 3
• item 2
• item 3

In example 5 the fixes from both examples 2 and 3 are applied.

• item 1
  • item 1
  • item 2
  • item 3
• item 2
• item 3

In example 6, we use a different solution, which is to give the list-items position:relative to create a new positioning context for the descendants of each so that we can use a fixed value for left instead of having to deal with the fixes for left:auto in IE5-7/Win.

• item 1
  • item 1
  • item 2
  • item 3
• item 2
• item 3