PDA

Click to See Complete Forum and Search --> : margin top doesn't seem to be working

MrComputerGeek
07-14-2008, 11:58 PM
<html>
<head>
<style type="text/css">
#container {
background: #000000;
margin: 0px;
padding: 0px;
width: 800px;
height: 400px;
}
#other {
background: #FF0000;
width: 400px;
height: 20px;
margin: 20px;
padding: 0px;
}
</style>
</head>

<body>

<div id="container">
<div id="other">this is a test</div>
</div>
</body>
</html>


For some reason, when I view this in the latest version of Firefox, the margin on #other moves BOTH #container and #other down 20px. However, it does move the #other div to the right 20px without effect to the #container. I'm under the Impression that the #container div should not be effected by this at all. Any Ideas?

P.S. It works just fine in IE.
Centauri
07-15-2008, 04:17 AM
This is the normal action of margin collapse, which IE gets wrong. The top margin of #other has nothing "solid" to push against (the top edge of #container is not "solid" unless there happens to be a border or padding there). To do what you want, use top padding on the container instead of top margin on the content.
WebJoel
07-15-2008, 07:52 AM
IE also gets "margin-bottom" wrong on BODY for the same reason, while other browser can do it.
One can use use "padding-bottom" on BODY with the same effect, and works all-browser.
MrComputerGeek
07-15-2008, 10:24 AM
Thanks for the help!