[css-d] Absolute positioning in relative element - bug or misunderstanding?
Hi all, I thought I understood absolute and relative positioning pretty well, but I've hit upon either a bug in Firefox and Safari (unlikely) or a bug in IE6 (likely) and/or gaps in my knowledge about this subject (also likely). Please have a look at the following two documents: http://jeroencoumans.nl/test/border.html http://jeroencoumans.nl/test/no-border.html In short: the body is relatively positioned, and in it are three divs: #content, #left and #right. The latter two are absolutely positioned to the top and to the left resp. right. Strangely enough, when the relatively positioned element *doesn't* have a border, the absoluteley positioned elements are positioned *relative* to the non-positioned element! The no-border.html demonstrates this: only #content has a top margin, yet both #left and #right start at the same margin. And even more dubiously, Internet Explorer seems to do the correct thing - the positioning shouldn't be affected by the presence of a border, so both files should be rendered the same. At least, that's what I thought. Does anybody have an idea what's going on? Thanks, -- Met vriendelijke groeten, Jeroen Coumans www.jeroencoumans.nl __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Absolute positioning in relative element - bug or misunderstanding?
Jeroen Coumans wrote: http://jeroencoumans.nl/test/border.html http://jeroencoumans.nl/test/no-border.html ... And even more dubiously, Internet Explorer seems to do the correct thing - the positioning shouldn't be affected by the presence of a border, so both files should be rendered the same. Els already answered this, I'd like to add why IE does it wrong. Margins do not collapse when they are not adjoining due to a border or a padding. This is why the given files do not render the same, which is correct. Block formatting contexts (float, overflow, position:absolute, display:table-..), do prevent margin collapsing, too. The bug in IEx-7 is that layout establishes a new block formatting context and prevents margin collapsing [1]. And body is a default layout element in IE, like td or iframe. Since there is no way to un-layout default layout elements in IE, and non-layout parents would be usually too instable to hold complex designs, or simply fail to work correctly: The only cross-browser workaround is to prevent margin-collapsing in the more standards-compliant browsers, by using padding, border, or by establishing a new block formatting context. Ingo [1] http://www.satzansatz.de/cssd/onhavinglayout.html#uncollapse -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
