Okay, I'm still not getting why this is happening. In the attached sample code is a simple page and CSS sheet designed to display a header across the page, a sidebar and content panel in two columns, and a footer across the page again. There are no margins or padding, so everything should butt right up against each other on the vertical.

In IE7 it shows exactly as it should. In FF3.5 there is extra vertical padding all over the place. I added a border around the whole page so you can see how there's even vertical padding above the header, when I haven't defined any, remove the border and it makes no difference.

Why is Firefox doing this? From trying to research it in the net it seems to be some kind of overflow when you have floating divs? There shouldn't be any overflow anywhere, nothing is defined that goes outside any other boundaries.

Can anyone explain why this is happening?

Many thanks in advance.

Guess it's not so simple, huh?

First mistake is coding it on a mac. Try a PC.


Second mistake is assuming that it is displaying correctly on IE and different in FF. It is the other way around, Test you sites in FF first.

What you are seeing is not overflow. It is margins.

Add this selector to the top of your CSS above the body selector.

Thanks. I knew the problem was I was doing something wrong and IE was ignorant of it so displaying "correctly," trust me. Firefox is always my default browser.

So, there's a default block element spacing that has to be over-ridden, is what you're saying? That makes sense, I thought I was going crazy.

Thanks!

Third mistake. Read this:

http://www.net-security.org/secworld.php?id=8489

http://www.cenzic.com/pr_200911091/

My Firefox has this installed:

http://noscript.net/

Nothing runs unless I specifically permit it.

Specifically, it's the default margins for your paragraphs which are producing the spacing.

Tom's code removes default margins from all elements on the page. To see that the margins of the paragraphs themselves are causing the problem, you can try replacing the universal selector with "p". You'll get the same result in this instance with this specific html.

http://reference.sitepoint.com/css/collapsingmargins

Thanks for an excellent article, Cary! I was kind of getting there, but I could not explain why. Now I can

Thanks again, guys. You saved my life.

Back to a question about oddness. I just tried the side in BrowserShots, and this version came up in IE6 for Win2000. I get the lack of png support, but what's with the space after the top image bar (the roundy corners) and the sidebar getting pushed down below the floating right div? Does IE6 not recognize floats?

Okay, after Googling for a while, it appears IE6 is still adding 3 pixel margins to my floated div, even after I put the 0px clause at the beginning? WTF?

Can I just expand the div containing the whole section by 6px so there's room for the extra crap added in, or do I need some clever way to subtract or cancel the addition again?