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
John CarneyReliability Business Tools Analyst IIAsked:
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.

Jason C. LevineNo 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

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
mreuringCommented:
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
John CarneyReliability 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
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.