Interesteing IE 7 Bug

[sitehatchery]

I found an interesting IE7 Bug.

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'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.

[paul_wilkins]

IE walks up the tree looking for what the paragraphs should be positioned relative to.

If IE can't find anything it positions it relative to the body.

The solution: set a relative position on the container itself as well.

[Jake Arkinstall]

To be honest, using the Position property in css isn't a good idea. IE7 doesn't handle it properly, and IE6 doesn't even handle it. Firefox isn't that great with them either.

The solution is to use the Padding and Margin properties instead. It means you have to think about it differently, but it's cross-browser friendly.

[galen]

i don't know why you think positioning doesnt work well. As long as you stay away from position: fixed in ie6 you should have no problems.

[Dan Schulz]

Galen's right. Position: relative (as do the others, with the exception of position: fixed; in IE 6) does work in IE.

Oh, and to fix this particular problem, add position: relative; to the #list_test selector (and remove the embedded stylesheet from within the body section of the page as well).

[sitehatchery]

Adding position:relative to the #list_test worked. Thanks!

I did remove the embedded stylesheet from within the body section of the page. I know that this is technically incorrect, but I've never understood why. It's always worked within the body tag, so why is it incorrect?

[Dan Schulz]

Because it doesn't belong there (it doesn't output HTML or reference a script that can, nor does it wrap around text - in other words, it doesn't "mark up" anything).

[sitehatchery]

Thanks

[sitehatchery]

IE walks up the tree looking for what the paragraphs should be positioned relative to.

If IE can't find anything it positions it relative to the body.

The solution: set a relative position on the container itself as well.

Could IE be correct here? Firefox will position it relative to the parent container. Whereas IE will position it relative to the closest relative-positioned parent container below the body (did I say that right?). So, it seems that you would have more control with IE's way - though it would be easier to make mistakes. Is this analysis correct, and what do you think?

[Dan Schulz]

Not likely. Opera and Safari do the same thing as Firefox here.

[Centauri]

I now see where your second question to the same post (posted at the same time) on Webdeveloper came from, which I answered there...

[rant]Might I suggest not posting multiple forums at the same time? - if you don't get an acceptable response on one forum, then post on another..[/rant]

[sitehatchery]

I'm new to this forum community. In addition to getting an answer to my question, I'm wanting to see if I get the same level attention to posts as on Webdeveloper.com. I've been with the other forum for a long time and I thought I'd try a new forum--and I'm really liking it.

[Centauri]

and I'm really liking it.

Yes, 'tis a nice place ...