posted by Kravvitz at 2:51 PM on Nov. 20th, 2009Categories: CSS, Browsers, IE, Bugs 2 comments
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.)
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.)
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.
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.
In example 5 the fixes from both examples 2 and 3 are applied.
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.