Dreamweaver - Mast head margin collapses in Firefox and Netscape

Author

Mast head margin collapses in Firefox and Netscape

CrimeDoctor

2005-08-01, 4:15 am

The Masthead titles display perfectly in IE6, but in Firefox and Netscape the
top margin collapses. Firefox and Netscape do not pick up the CSS margin of
30px for Mastheadh3. What is the proper CSS spacing protocol for Firefox and
Netscape that equals a 30px top margin and will still display correctly in IE6.

Here is the test page URL http://www.crime-free-association.org/test_page.htm

Here is the html:

<body>
<div id="wrapper">
<div id="masthead">
<div id="mastheadh3">International</div>
<div id="leftMast">
<h1>Crime Free Association</h1>
</div>
<div id="rightMast">Keep Crime Off Rental Property</div>

<div id="mastClear" style="font-size: 1px; line-height: 1px;
clear:both;"> </div>

</div>


Here is the CSS:

#masthead {
background-color: #006;
height: 140px;
width: 760px;
margin-top: 0px;
}

#masthead h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 250%;
color: #FF9;
text-decoration: none;
margin-bottom: 0px;
padding: 0;

}

#mastheadh3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 150%;
font-style: italic;
color: #CCC;
margin-left: 80px;
font-weight: bold;
width: 200px;
margin-top: 30px;
}

#leftMast {
width: 500px;
font-weight: bold;
margin-left: 30px;
float: left;
padding: 0;
display: inline;
margin-bottom: 20px;
}

#rightMast {
float:left;
width: 100px;
text-align: center;
font-size: 90%;
color: #FFC;
font-family: Georgia, "Times New Roman", Times, serif;
margin-left: 90px;
display: inline;
font-variant: normal;
text-decoration: none;
font-weight: bold;
font-style: italic;
}

trx

2005-08-01, 4:19 am

CrimeDoctor wrote:

> The Masthead titles display perfectly in IE6, but in Firefox and Netscape the
> top margin collapses. Firefox and Netscape do not pick up the CSS margin of
> 30px for Mastheadh3. What is the proper CSS spacing protocol for Firefox and
> Netscape that equals a 30px top margin and will still display correctly in IE6.

Your test page is still using this rule:

#mastheadh3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 150%;
font-style: italic;
color: #CCCCCC;
margin-left: 80px;
font-weight: bold;
width: 200px;
margin-bottom: -20px;
padding-top: 15px;
}

so I take it you are testing the new rule locally. The first thing that you
want to do is to delete the 140px height on #masthead. Once you get the
30px margin to display in all browsers, Firefox will observe that height
and let div#masthead's content overflow. IE incorrectly disregards your
height.

Next you need to deal with Firefox's very precise observation of the CSS
spec on collapsing margins, which stipulates that your 30px margin will
collapse with the next margin up, unless it is prevented from doing so by
padding, border, or content. Since div#masthead has no border, padding, or
content above div#mastheadh3, this means that your margin will collapse
with the body and appear above div#masthead. You can address this issue by
changing your margin-top of 30px to a padding-top of 30px, or you can give
div#masthead a pixel of top padding to actually contain div#mastheadh3's
margin within it:

#masthead {
background-color: #006;
height: 140px;
width: 760px;
margin-top: 0px;
padding-top: 1px;
}

When you have done either of the above, the your masthead should display
identically cross-browser.

--
trx

Murray *TMM*

2005-08-01, 7:35 pm

Amazing, isn't it? Two identical questions (more or less) about the same
arcane issue in two days. Good thing I set you up for this, huh trx?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"trx" <jimpm@rmthscfw.com> wrote in message
news:1vjree435rjvc.hd6bxpl749v1$.dlg@40tude.net...
> CrimeDoctor wrote:
>
>
> Your test page is still using this rule:
>
> #mastheadh3 {
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 150%;
> font-style: italic;
> color: #CCCCCC;
> margin-left: 80px;
> font-weight: bold;
> width: 200px;
> margin-bottom: -20px;
> padding-top: 15px;
> }
>
> so I take it you are testing the new rule locally. The first thing that
> you
> want to do is to delete the 140px height on #masthead. Once you get the
> 30px margin to display in all browsers, Firefox will observe that height
> and let div#masthead's content overflow. IE incorrectly disregards your
> height.
>
> Next you need to deal with Firefox's very precise observation of the CSS
> spec on collapsing margins, which stipulates that your 30px margin will
> collapse with the next margin up, unless it is prevented from doing so by
> padding, border, or content. Since div#masthead has no border, padding, or
> content above div#mastheadh3, this means that your margin will collapse
> with the body and appear above div#masthead. You can address this issue by
> changing your margin-top of 30px to a padding-top of 30px, or you can give
> div#masthead a pixel of top padding to actually contain div#mastheadh3's
> margin within it:
>
> #masthead {
> background-color: #006;
> height: 140px;
> width: 760px;
> margin-top: 0px;
> padding-top: 1px;
> }
>
> When you have done either of the above, the your masthead should display
> identically cross-browser.
>
> --
> trx

CrimeDoctor

2005-08-01, 7:46 pm

Thanks trx, that solved the problem...it's always something simple.

I guess I need to dust off my book about CSS rules...or maybe dust off my tried brain.

CrimeDoctor

2005-08-01, 7:46 pm

Yea, thanks Murray.

By having you set up my original template in CSS I bypassed learning all these
rules. Now that I started tweaking the template and trying new things I keep
getting into trouble. Reading the books only get you part way there...you
really need trial and lots of errors for the techniques to sink in.

Murray *TMM*

2005-08-01, 7:46 pm

Heh - my post was really for trx because he solved exactly the same problem
for me, earlier yesterday!

A good kick start with a layout is a great way to learn, though - I was
happy for the business, and happy to help out! 8)

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"CrimeDoctor" <chris@crimedoctor.com> wrote in message
news:dcl942$3s3$1@forums.macromedia.com...
> Yea, thanks Murray.
>
> By having you set up my original template in CSS I bypassed learning all
> these
> rules. Now that I started tweaking the template and trying new things I
> keep
> getting into trouble. Reading the books only get you part way there...you
> really need trial and lots of errors for the techniques to sink in.
>

trx

2005-08-01, 7:55 pm

On Mon, 1 Aug 2005 08:43:54 -0400, Murray *TMM* wrote:

> Good thing I set you up for this, huh trx?

Yeah, the question did seem familiar. :)

--
trx

trx

2005-08-01, 7:55 pm

CrimeDoctor wrote:

> Thanks trx, that solved the problem...it's always something simple.
>
> I guess I need to dust off my book about CSS rules...or maybe dust off my tried brain.

You're welcome. This business of collapsing margins is pretty obscure and
puzzling. Here are a couple of helpful links:

http://www.andybudd.com/archives/20...rgin_for_error/

http://www.complexspiral.com/public...apsing-margins/

--
trx