Philippe Wittenbergh wrote: > On Jul 24, 2009, at 10:51 PM, Don Spark wrote: > >> I probably have a basic IE browser bug affecting floats and or >> margins. It would be great to get a fix for this (#1.) margin-left >> 200px not working in MSIE7(5.5 and 6 too) and identify the bug so I >> understand it going forward. The CSS in question is at the bottom of >> this email. There are two other bugs (#2 and #3) I am trying fix at >> the moment if anyone knows. >> >> Here is a screenshot showing bug >> http://modernia.net/oh/7-22msie7-xp.png >> >> The address of this 'Ohlone' layout template is >> http://www.modernia.net/oh/5/ > > The parent of #content is a 'hasLayout' container (because of > overflow:hidden). This kinda swallows the margin of the first inflow > kid. That is the left-margin vanishes into thin air.
Hello Phillip, Not in this case. hasLayout usually swallows the default margins of descendant elements. In Don's case the margin-left is still present. > The overflow:hidden is apparently used to contain floats. Maybe choose > another technique ? Inserting an <hr> that clears the whole block as > last element in #container ? That would even be semantic... > > http://www.satzansatz.de/cssd/onhavinglayout.html#prop > > Philippe > --- > Philippe Wittenbergh > http://l-c-n.com/ In Don's case overflow:hidden does not seem to be disturbing IE7-. What is happening is that the float (triggering hasLayout) is being positioned by it *nearest ancestor with hasLayout* [1]. Microsoft states this about hasLayout. "In general, elements in Internet Explorer's Dynamic HTML engine are not responsible for arranging themselves. A div or a p element may have a position within the source-order and flow of the document, but their contents are arranged by their nearest ancestor with a layout (frequently body). These elements rely on the ancestor layout to do all the heavy lifting of determining size and measurement information for them." In Don's case the float div.content is being positioned by its nearest ancestor with hasLayout which is div#container. Here is a basic test case. <http://css-class.com/test/bugs/ie/ie-float-right-expansion-bug1a.htm> Please note that this in this case, the nearest ancestor with hasLayout is the <body> element. When div#content gains hasLayout the layout seems to work as intended. <http://css-class.com/test/bugs/ie/ie-float-right-expansion-bug1b.htm> When an overflow:hidden container is added the positioning is the same as the first test case (1a) and the same bug is noticed. <http://css-class.com/test/bugs/ie/ie-float-right-expansion-bug1c.htm> Again when div#content gains hasLayout (the child of element with overflow:hidden) the layout seems to work as intended. The positioning is the same as the first second test case (1c) <http://css-class.com/test/bugs/ie/ie-float-right-expansion-bug1d.htm> As a test I tried the same in reversed, testing float:left. http://css-class.com/test/bugs/ie/ie-float-left-expansion-bug1a.htm Now in this instance the margin-right:200px extends outside the viewport. This is interesting since a float filled with inline content in normal flow mixed with this bug causes a hasLayout container, the <body> element to expand outside the viewport since the margin-right:200px is still coming into play. The veiwport itself acts as a quasi element with some layout function which the float:left is contained by. Don, I think this may fix your layout but be warned, adding hasLayout may cause other issues. *+html #content {height:1%;} /* fix for IE7 */ * html #content {height:1%;} /* fix for IE6- */ 1. <http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx> -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
