On Nov 15, 2009, at 5:39 AM, Mary Villanueva wrote: > I haven't been keeping up with CSS for quite some time so I'm not > sure if > this has been addressed or not but here's my question. Chrome is > putting a > space between my footer div and my content div which is nested > inside of a > wrapper and I can't figure out why. It seems to be recognizing the > min-height rule so I'm a bit lost on this. My design is simple ... > at least > I think it is. I basically have a wrapper which contains two divs, one > labeled for the left sidebar and one for the content on the right. The > wrapper background color is the same as the left div so that I have > the > appearance of equal sized columns. The only thing I did differently > on the > page in question is that I set a class for the content div so that I > could > customize a few minor things like lists. Thanks everyone for any > insight you > might provide for fixing this so that it will work in the Chrome > browser. - > Mary > > > > Here's the page in question: > http://byronsbyte.com/ced/photoshop/psTips1/index.html
The problem is not limited to Chrome. It also affects Safari (logically, same rendering engine as Chrome), Opera and IE 8. The issue is one of margin-collapsing. You set a min-height on div#content. The 'gap' you see in the browsers listed above comes from the margin-bottom of the last element in div#content (an ul), that collapses through the bottom edge of the parent div. margin-collapse is explained here: http://www.w3.org/TR/CSS21/box.html#collapsing-margins, see also this thread on the www-style mailing list: http://lists.w3.org/Archives/Public/www-style/2008Nov/0109.html In short, I think Gecko (all versions of Firefox) is wrong in this case - it used to be correct, but the wording of the spec changed. A simple fix to your problem is applying a minimal amount of padding to the bottom of div#content (padding: 0 0 1px; will do). That will prevent the bottom margin of the ul to collapse through. (I haven't checked, but IE 7 probably doesn't show the issue because 'min-height' triggers 'hasLayout' which also inhibits margin-collapse through) Philippe --- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ 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/
