PDA

View Full Version : Margin does not work when padding is 0 in FF

Dave54
12-10-2007, 05:14 PM
Is there any way around this annoying bug in FireFox? Here's a tiny example to demonstrate the bug:<html>
<head>
<title>test</title>
<style type="text/css">
#box1 {
width: 100px;
padding: 0px;
border-width: 0px;
margin: 0px;
background-color: #f00;
}
#box2 {
width: 100px;
height: 100px;
padding: 0px;
border-width: 0px;
margin: 20px 0px;
background-color: #0f0;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
</div>
</div>
</body>
</html>In this example, box2 is inside box1. Box1 has a padding of 0px, and box2 has a top and bottom margin of 20px. In IE, you will see box1 behind box2, both above and below it. However, in FF, there is no margin between box1 and box2. If you give box1 a padding of 1px or more, FF then renders it correctly.

This bug is messing up many of my web designs. Does anyone know a work-around?
Excavator
12-10-2007, 07:53 PM
It works if you float it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">
#box1 {
width: 100px;
padding: 0px;
border-width: 0px;
margin: 0px;
background-color: #f00;
overflow: auto;
}
#box2 {
width: 100px;
height: 100px;
float: left;
padding: 0px;
border-width: 0px;
margin: 20px 0px;
background-color: #0f0;
}

</style>
</head>
<body>
<div id="box1">
<div id="box2">
</div>
</div>
</body>
</html>

a border works too:
#box1 {
width: 100px;
padding: 0px;
border-width: 0px;
margin: 0px;
background-color: #f00;
}
#box2 {
width: 100px;
height: 100px;
padding: 0px;
border-top: 20px solid #f00;
border-bottom: 20px solid #f00;
margin: 0px;
background-color: #0f0;
}
Excavator
12-10-2007, 07:56 PM
Here it is working with no float:
#box1 {
width: 100px;
padding: 0px;
border-width: 0px;
margin: 0px;
background-color: #f00;
overflow: auto;
}
#box2 {
width: 100px;
height: 100px;
padding: 0px;
border: none;
margin: 20px 0;
background-color: #0f0;
}
Dave54
12-10-2007, 09:03 PM
Thank-you, Excavator. That worked perfectly.
From now on, whenever I set the padding to 0px, I will include "overflow: auto;"
Or better yet, always include "div{overflow: auto;}" at the top of my external stylesheets.
Dave54
12-10-2007, 09:58 PM
Actually, I found that "overflow: auto;" caused scrollbars to appear unnecessarily in IE. Now I use the general rule "div{overflow: hidden;}", and change it when needed.
RysChwith
12-11-2007, 07:20 AM
Incidentally, that's not a Firefox bug; that's actually the way it's supposed to work. Adjacent margins collapse so that, for example, a paragraph at the beginning of a div won't space itself out unnecessarily. Any kind of padding or border in between the two margins will remove the collapsing.

Rys