Stylesheets - Gap between divs in FF

Author

Gap between divs in FF

Andy

2005-10-13, 6:25 pm

hello all,

Having moved to trying table-free layout, I'm struggling a bit with
divs and spacing.

I've got two divs, the first of which solely contains an image, then a
second div below which contains only text. I'd like there to be zero
gap between the two.

I've succeeded in doing this in IE(6.08) but the only way I can get
the same result in Firefox(1.0.7) is to explicitly give the first div
a height of 159px - which is 16px smaller than the image the div
contains.

file is here: http://www.industrialandmarine.com/nl.html

Why does Firefox display this 16px gap?

Spartanicus

2005-10-13, 6:25 pm

Andy <g@g.com> wrote:
>Having moved to trying table-free layout, I'm struggling a bit with
>divs and spacing.
>
>I've got two divs, the first of which solely contains an image, then a
>second div below which contains only text. I'd like there to be zero
>gap between the two.
>
>I've succeeded in doing this in IE(6.08) but the only way I can get
>the same result in Firefox(1.0.7) is to explicitly give the first div
>a height of 159px - which is 16px smaller than the image the div
>contains.
>
>file is here: http://www.industrialandmarine.com/nl.html
>
>Why does Firefox display this 16px gap?

Collapsing margins:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

The top margin of the first paragraph collapses with the div above
because there's nothing in between the two. The second div doesn't
affect this because it has no top padding and/or border.

--
Spartanicus

Andy

2005-10-13, 6:25 pm

On Thu, 13 Oct 2005 11:51:33 GMT, Spartanicus
<invalid@invalid.invalid> wrote:

>Andy <g@g.com> wrote:

[snip]

>
>Collapsing margins:
>http://www.w3.org/TR/CSS21/box.html#collapsing-margins
>
>The top margin of the first paragraph collapses with the div above
>because there's nothing in between the two. The second div doesn't
>affect this because it has no top padding and/or border.

ahaaa

yes, I though it was something to do with that, but the fact it was
the p margin and not the div margin eluded me...

thanks!