On 2007-09-19, alice <al***@fearofdolls.comwrote:
Can someone tell me how I can make it so that on this page
http://s195679515.onlinehome.us/essence/index.html
in Firefox, the space after the main content and the bottom boxes is
only 5px? As it is now, it seems as though the Firefox is adding extra
pixels, which I can't seem to find where in my code that is coming
from. I've tried getting rid of the clear property of the div
(#block), but that moves part of it up to the top of the screen.
What browser are you comparing it with? I think the total gap of 10px is
correct. You've got #swap with 5px bottom margin followed by #fill with
another 5px bottom margin. Both are floats, so those margins should not
collapse even though #fill has zero-height.
The following box has clear set on it so it should correctly clear to
below the preceding bottom margin (although it might lose some of its
top margin if it had any).
You are relying on quite a few tricky rules here though. It's possible
you put #fill in in the first place because some other browser was
incorrectly not clearing the bottom margin of #swap.
If you use padding instead of margins there are fewer rules to worry
about-- padding doesn't collapse and isn't involved in the specification
of clear the way margin is. You could try giving #swap padding-bottom of
5px, and no bottom margin, and getting rid of #fill altogether. That
should work in Firefox and hopefully also in whatever else you're
testing in.