Alan Chandler wrote: > http://www.chandlerfamily.org.uk/testing/col.html
> 1) The picture used as the background for the #logo div is 164 x 123 > pixels. The #header div has a left margin of 164px, and whilst it > sits close to the picture on both Firefox and Konqueror, IE/6 seems > to show white space between the backgrounds of the #logo and #header > divs. That's the negative effect of 'hasLayout'[1] - the '3px jog' bug, where 3px is added to the left margin in IE/win. Solution: don't declare a width on #header, or set the width to 'auto' (which is default anyway). That way there's no 'hasLayout' trigger, and subsequently no disturbing '3px jog'. > 2) If I add a border round the #header div the padding and a margin > at the top of the page seem to alter in Firefox and Konqueror but not > in IE/6 http://www.chandlerfamily.org.uk/testing/col2.html (with css > at http://www.chandlerfamily.org.uk/testing/col2.css) That's the effect of preventing 'collapsing margins'[2], where the margins on h1 is _contained_ within #header, instead of _escaping_ it. You can see that there's a margin/gap above the page in your first example-page, and that margin/gap is gone in your second example-page. That gap is the "escaped" or 'collapsed' margin of h1. IE messes with it a bit because of its 'hasLayout' bug. Once that bug is taken care of by not triggering it (as explained for your first question), IE will behave more like the other browsers. The most cross-browser stable solution is to add a padding top/bottom to #header, as that will contain h1's margins in the #header in all browsers. > Can someone explain what these effects are - so I can figure out how > to fix them. Sorry if I take the fun out of "bug-hunting" :-) , but the quick fix is to add... #header {width: auto; padding: 1px 0;} ...to solve both problems, and then add a margin-top to #wrap if you want a gap up there above the "page". regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html [2]http://www.w3.org/TR/CSS21/box.html#collapsing-margins -- http://www.gunlaug.no ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
