Re: [css-d] Random padding in firefox...
David Hucklesby wrote:
Indeed that works. But I'm as confused as Jerod here - I don't see
evidence of margins on anything here. The only element that's likely
to have a margin is the UL, and Jerod has expressly set that to
zero. And poking around with Firebug, I can't see what is
overflowing.
So Collapsing Margin Bug does not seem to be an explanation.
The margins in question are on #headerText h2 and #headerText h3. Remove
the top and bottom margins on those two elements, and the need to
contain collapsing margins in #header is gone.
The confusion comes from the fact that the vertical margins that are
collapsing, creates a gap at the same place regardless of whether they
are top or bottom margins.
Since margins in themselves are invisible there's no way I can prove
which element the top vs. the bottom margins get attached to for the
case at hand. However, the top of #header and the bottom of #toolbar
meet where the gap appears, so both these elements probably get an extra
margin out of the collapsing margin process. This gap won't become
larger than the largest vertical margin that ends up there - 10px.
Comment out #headerText h2{margin-bottom:10px;} and there will only be a
5px gap, since the other vertical margins that are involved are all 5px
tall. The gap will stay at 5px until all vertical margins on h2/h3 are gone.
regards
Georg
--
http://www.gunlaug.no
__
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/
Re: [css-d] Random padding in firefox...
Thanks all for the replies...the overflow: hidden does indeed do the trick,
and Georg's explanation makes sense. The 1px border is still up on the site,
because you can't *really* tell that it's there and I'm still playing with
it to figure this out, so if anyone else wants to mess with it in firebug,
you're still able to.
Thanks for the help!
-Jerod
On Fri, Jan 16, 2009 at 3:52 AM, Gunlaug Sørtun gunla...@c2i.net wrote:
David Hucklesby wrote:
Indeed that works. But I'm as confused as Jerod here - I don't see
evidence of margins on anything here. The only element that's likely
to have a margin is the UL, and Jerod has expressly set that to
zero. And poking around with Firebug, I can't see what is
overflowing.
So Collapsing Margin Bug does not seem to be an explanation.
The margins in question are on #headerText h2 and #headerText h3. Remove
the top and bottom margins on those two elements, and the need to
contain collapsing margins in #header is gone.
The confusion comes from the fact that the vertical margins that are
collapsing, creates a gap at the same place regardless of whether they
are top or bottom margins.
Since margins in themselves are invisible there's no way I can prove
which element the top vs. the bottom margins get attached to for the
case at hand. However, the top of #header and the bottom of #toolbar
meet where the gap appears, so both these elements probably get an extra
margin out of the collapsing margin process. This gap won't become
larger than the largest vertical margin that ends up there - 10px.
Comment out #headerText h2{margin-bottom:10px;} and there will only be a
5px gap, since the other vertical margins that are involved are all 5px
tall. The gap will stay at 5px until all vertical margins on h2/h3 are
gone.
regards
Georg
--
http://www.gunlaug.no
--
Jerod Venema
Frozen Mountain Software
http://www.frozenmountain.com/
919-368-5105
__
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/
Re: [css-d] Random padding in firefox...
Jerod Venema wrote: Thanks all for the replies...the overflow: hidden does indeed do the trick, [snip] ...I'm still playing with it to figure this out... I just sent something like this to the list a while back, so pardon the redundancy, but it seemed to help some folks, so here it is again: Brief ASCII Overview of Collapsing Margins: Key: [m] = margin, [p] = padding, [b] = border I think it helps to think of margins as broken lines, or like the teeth of a zipper, so that the top and bottom margins might be represented like this: m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) Visualizing it that way helps to make sense of why they collapse. The teeth fall into and around each other, resulting in a collapsed margin like this: m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... m (#px collapsed top/bottom margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) To switch the margins to a solid form, we can add padding or borders, which act as a sort of filling and make the margins solid like this: m (#px top margin) p (#px top padding) Lorem ipsum dolor sit amet... p (#px bottom padding) m (#px non-collapsed bottom margin) m (#px non-collapsed top margin) p (#px top padding) Lorem ipsum dolor sit amet... p (#px bottom padding) m (#px bottom margin) ...or use borders which achieve the same effect. m (#px top margin) b (#px top border) Lorem ipsum dolor sit amet... b (#px bottom border) m (#px non-collapsed bottom margin) m (#px non-collapsed top margin) b (#px top border) Lorem ipsum dolor sit amet... b (#px bottom border) m (#px bottom margin) -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.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/
Re: [css-d] Random padding in firefox...
On Wed, 14 Jan 2009 22:13:37 -0500, Bill Brown wrote:
Jerod Venema wrote:
I've got a weird bug that I can't figure out. Our website,
www.frozenmountain.com,
shows the behaviour. If you visit the site, check out #header. You'll notice
that it
has a 1px top padding. What's bizarre is, if you remove the padding, the
spacing
jumps about an extra 10px. I can't for the life of me figure out why. It
only happens
in FF3 (well..only being liberal, I've only tested in FF and IE so far).
Anyone have any ideas?
Hi Jerod--
Collapsing Margin Bug.
Try this:
#header {
overflow: hidden;/* -- ADD */
/* padding-top: 1px; -- REMOVE */
}
Indeed that works. But I'm as confused as Jerod here - I don't see
evidence of margins on anything here. The only element that's likely
to have a margin is the UL, and Jerod has expressly set that to zero.
And poking around with Firebug, I can't see what is overflowing.
So Collapsing Margin Bug does not seem to be an explanation.
Could you please elaborate?
Cordially,
David
--
__
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/
Re: [css-d] Random padding in firefox...
David Hucklesby wrote:
On Wed, 14 Jan 2009 22:13:37 -0500, Bill Brown wrote:
Jerod Venema wrote:
www.frozenmountain.com, shows the behaviour. If you visit the
[snip:collapsing margin explanation]
Anyone have any ideas?
Collapsing Margin Bug.
#header { overflow: hidden;/* -- ADD */ /* padding-top: 1px; --
REMOVE */ }
Indeed that works. But I'm as confused as Jerod here - I don't see
evidence of margins on anything here. The only element that's likely
to have a margin is the UL, and Jerod has expressly set that to
zero. And poking around with Firebug, I can't see what is
overflowing.
So Collapsing Margin Bug does not seem to be an explanation. Could
you please elaborate?
I would elaborate, but I see Jerod has adjusted the code and I don't
have a local version (I used Firebug to troubleshoot). If Jerod (or you)
has/have the original code, I could explain it better.
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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/
Re: [css-d] Random padding in firefox...
David Hucklesby wrote: Indeed that works. But I'm as confused as Jerod here - I don't see evidence of margins on anything here. The only element that's likely to have a margin is the UL, and Jerod has expressly set that to zero. And poking around with Firebug, I can't see what is overflowing. So Collapsing Margin Bug does not seem to be an explanation. Could you please elaborate? Cordially, David -- Not answering for Bill, just some random thoughts... If you delete the padding-top:1px; IE/6.0 and IE/7.0 get it wrong (they show no gap). Compliant browsers get it right (they show a gap). The padding-top:1px; contains the collapsing margins (I think) [1]. [1] http://www.w3.org/TR/CSS21/box.html#collapsing-margins -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.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/
[css-d] Random padding in firefox...
Hey all, I've got a weird bug that I can't figure out. Our website, www.frozenmountain.com, shows the behaviour. If you visit the site, check out #header. You'll notice that it has a 1px top padding. What's bizarre is, if you remove the padding, the spacing jumps about an extra 10px. I can't for the life of me figure out why. It only happens in FF3 (well..only being liberal, I've only tested in FF and IE so far). Anyone have any ideas? -- Jerod Venema Frozen Mountain Software http://www.frozenmountain.com/ 919-368-5105 __ 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/
Re: [css-d] Random padding in firefox...
Jerod Venema wrote:
I've got a weird bug that I can't figure out. Our website,
www.frozenmountain.com, shows the behaviour. If you visit the site, check
out #header. You'll notice that it has a 1px top padding. What's bizarre is,
if you remove the padding, the spacing jumps about an extra 10px. I can't
for the life of me figure out why. It only happens in FF3 (well..only being
liberal, I've only tested in FF and IE so far).
Anyone have any ideas?
Hi Jerod--
Collapsing Margin Bug.
Try this:
#header {
overflow: hidden;/* -- ADD */
/* padding-top: 1px; -- REMOVE */
}
Hope it helps.
--Bill
__
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/
