Vertical space between div's in netscape

[Harvs]

I have made a page where I have several divs that are all centered and make a vertical column. The problem is in IE they all sit flush up against each other, which is good, but in Netscape there seems to be this mystery gap between each element which I can't get rid of. I have borders, padding and margins all set to 0 so I can't see what else it could be.

Any suggestions?

[Lance]

Could it be a line-height issue? Try setting line-height: 1em; on your divs and/or body. This is just a guess.

[encyclo]

When you say "Netscape", which version are we talking about, Harvs?

[BonRouge]

Hey.
Funnily enough, I'm having a similar problem in Firefox 1.0. I tried the line-height idea, but it's not that - it's not so important for me, but it is really frustrating and you know what it's like when you have a problem you can't fix...

[...tears his hair out for no apparent reason...]

[encyclo]

Also, have you got rid of all the white space and carriage returns between the divs? Sometimes that can help...

[BonRouge]

Interesting idea... didn't think it would work and...

...it didn't.

Thanks though.

[XtendScott]

I had a similar issue and found the Netscape 6.2+ and FireFox left a small gap between images. I found that it was rendering differently in DOCTYPE XHTML 1.x Vs. HTML 4.1 transitional. With 4.1 transitional there were no gaps. (Very Odd)

I don't know if this is your issue, but I will try to find what my solution was.

XtendScott

[BonRouge]

That's interesting, but to be honest, I'm trying to go forward where possible and thinking about using Transitional seems to be a backward step.

EDIT: ... (I've just checked what you said and yes - that did fix the problem, but...)

[XtendScott]

See: sticky mail.

Gotta run for now.

[SuzyUK]

ahem... could we all see that sticky ;)

btw I think it may be Collapsing Margins, what is the content in each of those divs, does putting a border or padding at the top/bottom of the divs stop the gap?

[XtendScott]

Sorry, the sticky mail was for a link to a site that I found similar to what I was trying to do, and what helped me find a solution.

img {
display:block;
border:0px;
margin:0px;
padding:0px;
}

It was resolved for me with the "display:block;". It is/was an irritant to me for quite some time until I finally found that it was the XHTML 1.1 making the difference. I have a single header image, not sure what would happen with multiple images.

XtendScott

[BonRouge]

Hey Suzy : I have an image above and a menu below. I want them to sit together - no space. Are you suggesting putting a border in?

EDIT: I had two images above the menu, so they needed to be inline, but if I just make them into one image I have no problem.

Thanks for the help.

[SuzyUK]

Two questions so two answers ;)

XtendScott.. thanks, if I remember there was an article on "Mysterious Gaps" on "Devedge" and used to be an allowable link, but Devedge is no longer.. the article pertained to the gaps caused by images

If it's a small (2-3px) gap then it is most likely the images and their alignment.
display:block; or vertical-align: bottom; should fix it. (using vertical-align should still allow you to use your two seperate images BonRouge)

An image being an inline element is aligning itself to the baseline of text by default, but that is not the bottom.. the baseline is the bottom of letters with no descenders like a, n, m whereas the bottom is where letters like g, j, p finish

If the gap is larger than about 10px then it's possibly down to a margin on an internal element (e.g. the list) collapsing/ combining with the divs margin and rendering on the div, this is natural behaviour although the browsers differ on where they actually render the collapsed margin.

To test if this is what's happening putting a border on the div should stop any gaps between divs by keeping the internal margin on it's internal element.. This is also a fix, but if you don't want a border (which could be the same as the background color) you can use 1px padding on the div instead..

Suzy

[Harvs]

Sorry Guys, I got called away on work so I couldn't even reply to my own post, hopefully someone still checks the post and can help. To save confusions here's a simplified version of the code I'm trying to fix. I am trying to make it so the two red boxes sit flush against each other. I assume it's because the div is a block element so it put a space in. If I make it inline the boxes disappear, any ideas what I can do? code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
<!--body{background:black;}
#content{background:red;margin:0;border:0;padding:0;}
#footer{background:red;margin:0;border:0;padding:0;}
-->
</style></head><body>
<div id="content"><p>content</p></div> <!--content-->
<div id="footer"><p>Copyright 2004 austravel.com. All Rights Reserved.</p></div> <!--footer-->
</html>

[SuzyUK]

Hi Harvs..

it is collapsing margins. The margin (default) of the <p> elements are collapsing/combining with with their parent <div> element.

In order to stop the margin collapsing you need to put something that stops the two margins "touching" each other.. padding or border on the div will do it

div {background:red; margin:0;padding:0; padding: 1px 0;}

Suzy

[Harvs]

Thanks SuzyUK that solves the problem, although I don't fully understand why adding 1px of padding top and bottom would bring them closer together. Is this how it is meant to work or is it a bug? Can you reference any pages that might help me understand?

[SuzyUK]

Harvs..

it is how it's meant to be.. it's not a bug
btw only vertical (top/bottom) margins collapse, and I often think it helps to think of them as combining margins the word collapse suggests they should disappear?

references
CSS2 recs for Collapsing Margins [w3.org]
CSS2.1 recs for Collapsing Margins [w3.org]

and more talk here [google.co.uk]

Adding the padding does not bring them closer together (it actually moves them 1px apart).. but it is acting to force the combined margin to display on the child <p> instead of the parent <div>.

the Margins belong to the <p> (it has margins by default) but the parent <div> margin (even though it's zero) adjoins to(touches) the <p> margin, which is approx 1em by default).. collapsing rules state that it is the adjoining margin which should render so the margins are compared and the larger margin wins, and what you were seeing was that it is the parent (classed as "adjoining to" the child) which gets the margin.. in your case the <div> takes on the largest margin = your gap :)

from the recs:

The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

Why it's meant to be...if you simply had:
p {margin: 20px 0;}

<p>some text</p>
<p>some text</p>

those two paragraphs both have a 20px top and bottom margin so theoretically that means there should be a 40px gap between them. But in most cases that is not the desired effect.. you expect that the gap should be 20px so that's where collapsing does it's job

wrapping them <p>'s in a div does not alter this perception because <div> is a generic styling element it has a zero margin by default..

but becasue of the rules of collapse that puts it into the parent/child collapse scenario

para

div

The art doesn't do justice here because the div has no padding but just imagine the top two lines are touching touch..
then to the box model

margin

border

padding

content box

If you were to see the box model as applied to <div><p> scenario it would look something like this

div margin

p margin

both content boxes

that is the two margin edges are touching.. (therefore they will collapse/combine)

by adding either padding or border you stop the margin edges from touching by putting something between them..

div margin

div border

div padding

p margin

both content boxes

so the collapsing rules are being thwarted..

It can happen with anything that has a default margin.. <hn>, <p>, <form>, <ul>.. etc.. but it's only when divs are being used to provide background color, borders or images that people actually see the "gaps" because otherwise the space around the inner element is still correct.

Also a point to note that during all this IE does have a quirk (surprised?) in certain cases it doesn't handle collapsing very well, I've found that not relying on default margins is the best way to get it to conform.. e.g. specifically give all your elements margins do not rely on the default..

e.g. p {margin: 1em 0;}

Well have fun reading, and excuse the art ;)

Suzy

[edit] spelling, collapse collapse

[edited by: SuzyUK at 10:30 am (utc) on Oct. 26, 2004]

[Harvs]

Thanks again SuzyUK, That clears everything up perfectly, it's always good when someone can explain things with such detail and still be able to understand it :)