Thursday, July 19, 2007

Firefox window top margin "bug?"

Sometimes Firefox may render additional margin at the top of the window even though all margins of top-level boxes and html/body container are set to zero. For example:

<html>
<head>
<title>FireFox Top Margin "Bug?"</title>
<style type="text/css">

html, body {
margin: 0px;
padding: 0px;
border: 0px;

font-family:sans-serif, Tahoma, Arial, Helvetica;
font-size: 10pt;
background-color: #ffffff;
}

#maincontents {
margin: 0px;
padding: 0px;
border: 0px;

height:100%;

background:#bbeebb;
}
</style>
</head>

<body>
<div id="maincontents">
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
</div>
</body>
</html>


The strange thing is that margin disappears if you set border and make it visible, i.e. add border:1px solid to #maincontents style.

While it looks like a bug this case is actually covered in specification. In particular it is said that adjoining margins are those of boxes not separated by padding or border areas. It is also said that these are collapsed to form a single margin for unlimited number of nested boxes. The margin height is equal to maximum margin from the set of boxes.

So if you do not want any margins like that - and top window margin is just the specific case of it - you may try to make troublesome box floated or teach children how to behave properly.

#maincontents {
margin: 0px;
padding: 0px;
border: 0px;

height:100%;

background:#bbeebb;
}

#maincontents > :first-child {
margin-top:0px;
}

See example files at: http://rainforce.org/pile/css/