On Wednesday 25 October 2006 01:28, Gunlaug Sørtun wrote: > 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'.
I thought it might be the 3px jog, since my previous attempt had #header floating right, but in IE I needed the width of #logo and #header to be 6 less than #wrap in order for it to fit. > > > 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. But ...? Why has #header h1 a margin, doesn't it inherit the #wrap declaration of 0. > 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;} OK it does - thanks > > ...to solve both problems, and then add a margin-top to #wrap if you > want a gap up there above the "page". No, I don't want the gap. > > regards > Georg > > [1]http://www.satzansatz.de/cssd/onhavinglayout.html > [2]http://www.w3.org/TR/CSS21/box.html#collapsing-margins Thank you very much for that. I don't see how I could ever have got there on my own. -- Alan Chandler http://www.chandlerfamily.org.uk ______________________________________________________________________ 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/
