homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

FireFox/Mozilla Gap beneath div
A bit of extra space showing up under a div

 10:04 pm on Jun 19, 2004 (gmt 0)

Trying to get my site to be completely cross-broswer/cross-platform (and doing a good job of it I think) I ran across this problem, and can't figure out how to solve it. I'm working in a two-column layout, both floated, with a clearing div beneath them as a footer. the problem is, even though the footer has nothing beneath it, and it's margin and padding are set to 0, mozilla and firefox display a small amount of space under the footer. Anybody have any idea where this space is comming from or how to get rid of it?



 11:03 pm on Jun 19, 2004 (gmt 0)

Do you have an image in that div? And what is your DTD? The extra space may be related to Mozilla's fully compliant standards mode rendering (something that's been surprising lots of us in recent times.)

If any of this rings a bell, see this thread for more information:


 11:15 pm on Jun 19, 2004 (gmt 0)

hey, thanks for the reply. Yes, i do have images in that div, and their margin, border, and padding are all set to 0px. The page is fulling complient and validated xhtml 1.1 running in standards mode.


 11:32 pm on Jun 19, 2004 (gmt 0)

Have you tried switching those images to display:block?


 11:35 pm on Jun 19, 2004 (gmt 0)

Welcome to WebmasterWorld, bloodstrike!

(I was beaten to the answer by tedster!)


 11:56 pm on Jun 19, 2004 (gmt 0)

hey guys, thanks for the responses and thanks for the welcome. Yeah, i've tried display: block on the images in that div, and all that accomplished was stacking the three images instead of displaying them side by side. no luck on the extra gap. BUT... i was working hard on making an example page to show here so that everyone had a better idea what i was looking at, and after cutting my page to pieces and slowly adding the css back using inline styles, i found the culprit. It seems (i don't know why) that my style body { border-top: medium solid #224 } was causing the gap at the bottom of the page. Again, i have no idea why, but after checking it out, that definatly was the problem. Hopefully this kind of stuff will get worked out soon, because even though i'm a huge IE fan, firefox is growing on me. thanks again for the help.


 12:32 am on Jun 20, 2004 (gmt 0)

Glad you got it to work (we don't allow links to example pages, by the way.) But you went through the right exercise there - instead of staring in frustration at the whole document, start decontructing the mark-up until you find the culprit factor.

I'm curious about this issue you pinned down - can you give us just enough HTML mark-up to duplicate the problem?


 3:21 am on Jun 20, 2004 (gmt 0)

i'd love to... i really would... but i'm having a bit of trouble reporducing it now. I must have changed a style somewhere that I don't remember because i can't get the gap to re-appear... even after I did just a few hours ago. Well, i'll keep trying, if i figure out something concrete i'll definatly share it with webmaster world (this place is great).


 1:24 pm on Jun 20, 2004 (gmt 0)

If it is just an image and no text, put { line-height: 0; } in your definitions. This will get rid of the extra space.


 4:42 pm on Jun 20, 2004 (gmt 0)

I had almost forgotten this, but I think I found a similar gecko/firefox bug a while ago, a bottom margin on an element was incorrectly being added to the top of the element, it's possible border also triggers it, I can't remember the exact layout, but it was very annoying, once I removed the bottom margin the problem went away, wish I could remember the exact combination of divs etc that caused the problem.


 4:23 pm on Jun 21, 2004 (gmt 0)

The problem is probably being caused by Moz's handling of "collapsing margins"

..collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

see this thread [webmasterworld.com] for more details.

The (debugging) test, which imo isn't really debugging as I've tried to dissect the specs and can't say for sure which one of Moz, IE or Opera have implemented recommendations more thoroughly!.. would be to put * {margin: 0; padding: 0;} at the start of a stylesheet, if that cures the "gap" then it's a pretty safe bet that there is a margin in your code which is not collapsing how you expect it to.

The "problem" is becoming more noticeable these days because of the increased use of floats and therefore the different browsers handling of clearance [w3.org] (The clear property).

Clearance is introduced as spacing above the margin-top of an element. It is used to push the element vertically (typically downward), past the float.

The clearance pushes the cleared item (typically a footer div) vertically so that the top margin property of the "footer" is cleared. But even if there are zero margins on the actual footer div the "collapsed margin" of elements inside the footer may be the cause of the gap.

A border is sometimes used as a "cure" for this behaviour. as they stop margins of adjacent elements coming into contact with each other.

I have all the words "cure" bug etc.. in quotes, because this is not a bug it's a feature and all my research so far suggests that Moz is most correct in it's interpretation.

It's very difficult to demonstrate margin rendering but try this code:

html, body {margin: 0; padding: 0;}
#header {background: #ddd;}
#left, #right {
width: 40%;
background: #ffc;
border: 1px solid #000;

#left {float: left;}
#right {float: right;}

#footer {
clear: both;
background: #ddd;
border: 1px solid #000;

h1, p {background: #0f0;}
h1 {margin: 0;}
/* p {margin: 0;} */

<div id ="header"><h1>header text</h1></div>
<div id="left"><p>left text</p></div>
<div id="right"><p>right text</p><p>more right text</p></div>
<div id="footer"><p>footer text</p></div>

This code is set up with borders (bold) so that it demonstrates where the margins of the internal elements are actually rendering. The borders prevent the margins (the default ones on the <h1>,<p> and the divs ) from touching each other so you can see that they're actually there.

Firstly this example demonstrates differences between IE and Moz. There are two things going on in IE.

One: Shown because I removed the default margin from the <h1> only. Note that although there is now no gap between the header and the floats there is also no top margin on the first <p> element in the floated divs either! PS: I don't know where they've gone either, but it happens with the bottom margin too ;)

Two: The default <p> top margin (from the footer} is rendering outside the footer div, which is wrong, the border on the footer should act to contain the <p>: try adding this:
#footer p {margin: 2em;}
to the above code and increase/decrease the margin and you'll see the gap/margin increase/decrease. This is an IE bug which is known as "escaping margins" (I think anyway..)

So the different picture given between the browsers is a compounding error. IE clearly is still wrong.. although you probably don't notice the error the same ;)

Now for Moz...the rules of collapsing margins state that "Vertical margins between a floated box and any other box do not collapse." Therefore (as demonstrated) by the borders in Moz you now have two margins in play, the botttom <p> in the right float and the top <p> in the footer and because of the rule stated above they shouldn't collapse so you will get a larger gap (both margins) in Moz than you will in IE..

You stated that you were getting the gap in Moz even if there was no content in the footer, in that case it's only the right float's bottom <p> margin that you're seeing in Moz. IE's unusual bug (item one above) means there is no margin present.. :o

It's quite hard to demonstrate all interpretations in one go as margins can start collapsing through each other and it could be a deeply nested element that causes a gap at either the bottom or the top of divs, but this simple example hopefully at least demonstrates the differences between the basic interpretation.

Opera, which I haven't got available today but if I remember used to act very like IE in this scenario, but V7.5 may very well now act more like Moz? I know it also does have bottom margin collapsing issues but cannot offer more details just now..

Also in your case, and this is just a guess as you yourself say tweaking code prevents you from reproducing the original error, I think that by removing a border this actually caused margins to collapse through each other to the point were they were no longer causing a problem .. (perhaps to the bottom of the footer div and then to the bottom of the body)



 5:16 pm on Jun 21, 2004 (gmt 0)

Wow! Thanks for all that info Suzy. I had read about the whole 'collapsing margins' problems before, but i really couldn't figure out if that was what was going on. It still blows my mind that a layout problem at the bottom could be caused by a setting some where else in the page, but i guess it's possible! I've been checking over my code time and time again, and even though i can't fully reporduce what i had before (i really have no idea why), it seems most likly that i added some more 'margin: 0px' (that was one of my testing fixes to make sure everything was aligned right) to elements and that helped my problem. Anyway, thanks for the great info and all the help from everybody.

p.s. in my opinion, this whole collapsing thing is rediculus, if a designer puts two margins side by side he/she WANTS both those margins... not one margin that is half the size. just plain silly. let the language do what it's supposed to.


 6:33 pm on Jun 21, 2004 (gmt 0)

bloodstrike You're welcome

I don't even fully understand all this so I apologise if my explanation makes things sound worse than they are ;)

p.s. in my opinion, this whole collapsing thing is rediculus, if a designer puts two margins side by side he/she WANTS both those margins... not one margin that is half the size. just plain silly. let the language do what it's supposed to.

actually most times you don't even realise it's happening ;) take an essay with lots of <p>aragraphs of text if you have margins on those paragraphs (even if you don't the default will do it's job) are you sure you want double spacing? or if you've a header element that is immediately followed by a <p> do you want both margins visible?

Like I said it's been there for a long time but it's only now with clearance (of floats) that the interpretation of recs has come under the spotlight..

What I actually do (but it's not right) is to negate, set to zero, all margins on all elements then control any required spacing with padding. This get's rid of any "collapsing margins" issues but of course it gives me double padding between multiple <p>aragraphs..

Oh boy! one thing is sure this isn't as easy as it used to be ;)



 12:07 am on Jun 22, 2004 (gmt 0)

very true SuzyUK, i guess collapsing the margin for things like <p>'s and headers makes sense... but at the same time tends to just over complicate things. I usually end up doing exactly what you do - setting all the margin and padding to 0, then working from there. The problem is, certain elements don't mesh well with padding - <a>'s for example.

Sure, it's not as easy as it used to be, but hey, if it were easy, everybody'd be doing it and we wouldn't feel as special anymore ;).

Global Options:
 top home search open messages active posts  

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved