Re: [css-d] Struggling with IE6 compatibility for Holy Grail
Alan Chandler wrote:
>> But ...?
>>
>> Why has #header h1 a margin, doesn't it inherit the #wrap
>> declaration of 0.
>
>
> OK margins don't get inherited - but why doesn't it default to 0
That h1 has margin-defaults in all browsers, and will display that
unless you have declared your own margin on it. Defaults are not
necessarily the same across browser-land, so I usually declare my own
properties: values on the elements I use in a page.
(I never use the universal '* {margin: 0;}' BTW.)
Another problem with 'collapsing margins' is that it is hard to see
which margin comes from where, so there may even be other margins at
play that I didn't see.
The term 'collapsing' means vertical margins are supposed to collapse
onto each others when not prevented, so they can create quite a bit of
"standardized fun" to sort out in some layouts. Add a number of
browser-differences and bugs, and it may become even funnier :-)
regards
Georg
--
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/
Re: [css-d] Struggling with IE6 compatibility for Holy Grail
On Wednesday 25 October 2006 07:18, Alan Chandler wrote: > But ...? > > Why has #header h1 a margin, doesn't it inherit the #wrap declaration of 0. OK margins don't get inherited - but why doesn't it default to 0 -- 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/
Re: [css-d] Struggling with IE6 compatibility for Holy Grail
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/
Re: [css-d] Struggling with IE6 compatibility for Holy Grail
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/
Re: [css-d] Struggling with IE6 compatibility for Holy Grail
On Monday 23 October 2006 22:16, Alan Chandler wrote: > I have tried to use a modified version of AListApart's Holy Grail article > to line up the columns on my site (URL in my signature). The modification > is that > > a) I have put columns in the header and footer, > b) Mostly I only have two columns instead of 3 - setting one of the column > widths to 0. > > But IE doesn't display it correctly, and I can't work out what is wrong. I have a little test harness to figure out how to get a double column mechanism working correctly using the instructions at http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ . Its at http://www.chandlerfamily.org.uk/testing/col.html (with css at http://www.chandlerfamily.org.uk/testing/col.css) but I already have strange effects that don't seem to be documented anywhere that I have found so far. In particular 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. 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) Can someone explain what these effects are - so I can figure out how to fix them. -- 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/
[css-d] Struggling with IE6 compatibility for Holy Grail
I have tried to use a modified version of AListApart's Holy Grail article to line up the columns on my site (URL in my signature). The modification is that a) I have put columns in the header and footer, b) Mostly I only have two columns instead of 3 - setting one of the column widths to 0. But IE doesn't display it correctly, and I can't work out what is wrong. In particular, the leftmost column in the header has id #logo, with a picture as the background image in the CSS. It seems to disappear in IE6, although as you squash to width of the page down it suddenly jumps up and appears, but shifted down the page. Can someone help me understand why, and help me fix it please. -- 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/
