Margin-bottom with Firefox

In my tests, Firefox simply ignores the "margin-bottom" property when the style is applied to a DIV. Not so with IE or Netscape.

This is such a basic property that I feel I'm missing something... But what?
campinasAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
try adding a container-div with padding-bottom instead.

-r-
campinasAuthor Commented:
with padding there are color issues... (padding takes color of div, while margin takes color of parent)
RoonaanCommented:
You can use a transparent container div?

or add a   to the end of your html, such that there is actual need for a bottom margin.

-r-
Announcing the Winners!

The results are in for the 15th Annual Expert Awards! Congratulations to the winners, and thank you to everyone who participated in the nominations. We are so grateful for the valuable contributions experts make on a daily basis. Click to read more about this year’s recipients!

campinasAuthor Commented:
Transparent no... Can't figure what the   might do... I use the bottom-margin for vertical spacing between blocks (divs)
RoonaanCommented:
Do you have the page live?

-r-
campinasAuthor Commented:
not yet
campinasAuthor Commented:
It seems like margin-bottom really doesn't work with Firefox... so it's not that i'm missing something...

And with such a large Firefox base, this means time is not ripe for html strict - transitional is a must (i don't see any reasonable way of vertically spacing divs with css...)
margin-bottom works, however, with tables (even with Firefox)

comments?
Jakob_ECommented:
Hmm to me it looks as if there is another problem...
Margin-bottom does work in firefox!!


Test:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Float probelm, simplified</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { margin:0px; }
div { margin-bottom:20px; border:1px solid #000; padding:15px; }
#div1 { background:#080; }
#div2 { background:#b00; }
#div3 { background:#003; }
</style>
</head>
<body>
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
</body>
</html>
</html>



~ Jakob E


Jakob_ECommented:
Just leave out the last </html> tag...
Too fast for myself I guess ;-)

~ Jakob E
dakydCommented:
Without seeing some code, it's hard to do anything more than guess.

That said, my guess is that your margins are collapsing.  Per the CSS2 specs, vertical margins can collapse, so anything with a margin-top that happens to be farther down can cause your margin-bottom to be ignored.  For the full details, check out the CSS2 specs:

http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins

Hope that helps.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
campinasAuthor Commented:
Jakob, indeed... But in my case it doesn't - see code bellow.

dakyd, yes, it looks like it's a collapsing issue.
I shouldn't have used "display: block" as this adds margins. However, the specification says that with adiacent margins only the smallest is collapsed - while Firefox collapsed the largest. This might still be an issue. Here is the (simplified) code:
-----------------------------------------------
CODE IN CSS FILE:

html { white-space: nowrap;
      text-align: center }

div { display: block;
      width: 60%;
      margin-left: auto;
      margin-right: auto }
                              
div#motto      { font-size: 10pt;
      margin-bottom: 36pt }

div#title      { font-size: 36pt;
      margin-bottom: 48pt }

CODE IN HTML FILE:

      <div id="motto">Text 1div>
      <div id="welcome">Text 2</div>
      <div id="title">Text 3</div>
      <div>Text 4</div>
-----------------------------

Unlike Firefox, IE and Netscape don't collapse margins here; is it because they simply don't reset the type of element to block?







dakydCommented:
Actually, div's display as "block" by default, so you haven't changed the behavior by using that as the display.  I did notice that you didn't close your "motto" div properly, though.  When I fixed that, and used the following, FF and IE looked the same.  The margins also looked as expected - the larger 36pt & 48pt margin-bottoms were in place.  Hope that helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
html { white-space: nowrap;
     text-align: center }

div { display: block;
     width: 60%;
     margin-left: auto;
     margin-right: auto }
                         
div#motto     { font-size: 10pt;
     margin-bottom: 36pt }

div#title     { font-size: 36pt;
     margin-bottom: 48pt }
</style>
</head>

<body>
     <div id="motto">Text 1</div>
     <div id="welcome">Text 2</div>
     <div id="title">Text 3</div>
     <div>Text 4</div>
</body>
</html>
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.