...

View Full Version : CSS issue



jmcknight
02-05-2007, 10:28 PM
http://avarice.oneeightseven.org/work/SAN/test-new.html

Why is it that margin-bottom: 10px in the #top container also adds a 10px margin to the top when it shouldn't? This doesn't make sense.

rmedek
02-05-2007, 10:51 PM
It has to do with Gecko's method of collapsing margins (http://www.google.com/search?q=gecko+collapsing+margin&ie=utf-8&oe=utf-8&rls=org.mozilla:en-US:official&client=firefox-a). Put a border around #top and you'll see what I mean.

By the way, please use a clearer title when posting a thread, per our Rules (http://codingforums.com/rules.htm) and Posting Guidelines (http://codingforums.com/postguide.htm).

jmcknight
02-05-2007, 11:05 PM
It has to do with Gecko's method of collapsing margins (http://www.google.com/search?q=gecko+collapsing+margin&ie=utf-8&oe=utf-8&rls=org.mozilla:en-US:official&client=firefox-a). Put a border around #top and you'll see what I mean.

By the way, please use a clearer title when posting a thread, per our Rules (http://codingforums.com/rules.htm) and Posting Guidelines (http://codingforums.com/postguide.htm).

While reading up on this it makes sense, but what doesn't make sense is that I've used code like before without this problem. 2 or more floated div containers within another container and using margin-bottom with no problems at all.

koyama
02-06-2007, 12:09 AM
Actually, I think it rather has to do with the different float models of IE and FF. Try to give your #frame some background color and you will see what is going on.

When a div has explicitly set width IE incorrectly increases the height to contain floats. FF correctly lets floats stick out (partially or even completely) from the bottom.

Thus the space at the top in FF is actually the bottom margin of #top.

jmcknight
02-06-2007, 12:46 AM
This seems to solve my problem when adding it to the #top div:

overflow: auto;

_Aerospace_Eng_
02-06-2007, 04:50 AM
You should also look into clearing your floats. Thats the main cause of your problem. http://www.positioniseverything.net/easyclearing.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum