Link to home
Start Free TrialLog in
Avatar of campinas
campinas

asked on

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?
Avatar of Roonaan
Roonaan
Flag of Netherlands image

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

-r-
Avatar of campinas
campinas

ASKER

with padding there are color issues... (padding takes color of div, while margin takes color of parent)
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-
Transparent no... Can't figure what the   might do... I use the bottom-margin for vertical spacing between blocks (divs)
Do you have the page live?

-r-
not yet
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?
SOLUTION
Avatar of Jakob_E
Jakob_E
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Just leave out the last </html> tag...
Too fast for myself I guess ;-)

~ Jakob E
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?







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>