Extraneous space betw elements

HTML & CSS
1

this happens to me all the time, it drives me nuts, I want to finally get to the bottom of this…

http://mayacove.com/dev/modal/test.html

WHY is there extra space betw elements here?

if I add a border around elements the space disappears
http://mayacove.com/dev/modal/test2.html

but of course as you can see, I can’t do that here…
(I added overlfow:auto; to containing element, still no cigar…:wink:

I run into this prob again and again (occurs in all browsers), sometimes I can solve by adding borders around elements, but you can’t always do that, as is the case here…

would appreciate some help…

thank you…

PS: edit: just found out only browser it doesn’t occur is IE7!!! (&6? I don’t have to support IE6…) go figure…

2

That specific gap is coming from the margin value of “benefits_inner”. Try using padding instead.

You should look at a CSS reset (Google: Eric Meyer), this will help “normalise” your browsers and will help greatly with cross browser issues.

3

You will learn that some elements come with default margins, and different browsers come iwth differnet settings of them set. It’s probably not happening in IE7 due to something called collapsing margins. The bottom and top margins of elements are colliding.

You can read this article for more information on why your issue isn’t across every browser. You will need the reset as mentioned above.

4

tank you for yr response… actually I use a reset that has all elements set to margin:0; and padding:0;
http://mayacove.com/dev/modal/test.html

what I actually had to do was give all elements overflow:auto; (not the containing element, which is what I had tried…)

thank you…

5

Well to be honest I’d remove that code you just added to make all divs overflow:auto. That will only lead to troubles in the long run.

You actually only needed it on “#bens_main” but also putting it on “#benefits_inner” would also prevent a margin collapse happening (unrelated issue).

6

you’re right: need it only in #bens_main div

(yes under normal circs I wouldn’t do something like

#benefits div {overflow:auto; }

did it here for practical reasons… but, just like you say, only needed in that middle main div…

thank you very much…

7

Ok I just wanted you to know the… impracticality of using that on all divs.

You’re welcome :).