IE7 Bug-Relative-positioned elements in lists

[sitehatchery]

I found an interesting quirk in IE7. If you have a container that has the overflow set to auto or scroll and within that container you have list-items having relative-positioned elements, IE7 doesn't know what to do with it. Those elements positioned relatively do not abide to the overflow setting.

I originally created relative-positioned elements within the list tag so that I could control the positioning. As many know, if you set a list-item-image on the list item, Internet Explorer and Firefox place these images in different places. Controlling the positioning solves this. It worked fine when I didn't have a doctype. But as soon as I gave it a doctype, it broke in Internet Explorer.

I'm not quite sure how to express this very well, but you can see what I'm talking about here:

http://www.sitehatchery.com/articles/ie-list-item.php

I came up with somewhat of a fix - which is simply to control positioning with margins. But somehow that is very limiting. Has anybody ever run across this or know anything about it? I couldn't find anything on google, but I'd like to get this working correctly so that I can control the relative positioning of the item.

[Centauri]

Very interesting - also happens with IE6, so it is something that didn't get fixed for IE7. Not entirely sure which published bug this relates to, but like many IE issues can be cured by position:relative on the scrollable div.

I am curious as to what list issues you have that cannot be solved with margins / padding rather than offsetting with relative positioning.

[sitehatchery]

You're absolutely correct. I applied position:relative on the scrollable div and it worked correctly. Thanks!

Margins and padding do work. I was just hoping to control it using relative positioning. Your solution works.

Thanks!

[sitehatchery]

So, I'd like to know which browser is correct here.

IE looks for a positioned parent element on which to anchor the relative-positioned paragraph. If one is not found, it positions it relative to the body.

Firefox however, will position it relative to a parent element, regardless of whether there is positioning on the parent.

So which one is right and why?

[Centauri]

Relative positioning is relative to where the object would be if no positioning was applied - the relative positioning co-ordinates just offset the display from the normal position (which the element will still actually occupy, even though it is displayed at a different location).

[sitehatchery]

I see... then in this case, IE would be wrong since it does not go about it this way, right?

[Centauri]

As far as actually positioning relative to the normal position, IE handles this the same way as all the other browsers - just that sometimes relative positioning can trigger other bugs in IE6, and that can sometimes be fixed with relative positioning somewhere else.