CSS: Problems with margin-top in Firefox

In the html page below, the top-margin of 100px in "gallery" gets applied to "container" instead.Why is that, and how do I fix it? It works correctly in IE7.

Thanks,
John

http://www.discretedata.com/Ex-Ex/blueHeaderRollover_Test1.html
LVL 1
gabrielPennybackReliability Business Tools Analyst IIAsked:
Who is Participating?
 
Jason C. LevineConnect With a Mentor No oneCommented:
John,

I know there's a reason for this and will try to dig it up for you, but here's the workaround:

<style type="text/css">
<!--
#container {
      font-family: "Gill Sans MT";
      font-size: 14px;
      margin: 0 auto;
      height: 700px;
      width: 890px;
      margin-top: 20px;
      background-color: #CCCCFF;
      padding-top: 100px;
}
#header {
      height: 100px;
      width: 890px;
      margin: 0 auto;
      background-image: url(images/BluishHeader2.jpg);
}
#gallery {
      background-color: #FFFFFF;
      height: 100px;
      width: 400px;
      margin: auto;
}
-->
</style>

Remove the margin from gallery and instead use padding in container to push the div into position.
0
 
mreuringConnect With a Mentor Commented:
The reason is in one word "margin-collapse" (or does that count as two?)

That's about where my explanation ends. After 8 years of css experience margin-collapse is still not 100% clear. Suffice to say, quite often it's a pain, but that's only because in the other 99 out of a 100 situations it works so well you don't realise what it's doing for you :)

The known work-arounds:
- Use padding instead of margin, as suggested  by Jason (http:#20854301)
- Place a border on the edge where the margin 'collapses' borders prevent margin-collapse.
0
 
Jason C. LevineNo oneCommented:
Thanks, mreuring.  
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Thanks to both of you. Great suggestions that a) work b) add to my knowledge of CSS.

So thanks!

John
0
All Courses

From novice to tech pro — start learning today.