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?
This is such a basic property that I feel I'm missing something... But what?
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-
or add a to the end of your html, such that there is actual need for a bottom margin.
-r-
ASKER
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-
-r-
ASKER
not yet
ASKER
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?
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Just leave out the last </html> tag...
Too fast for myself I guess ;-)
~ Jakob E
Too fast for myself I guess ;-)
~ Jakob E
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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?
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>
<!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>
-r-