Minimum height for div appears to be 20px ... ??

Hi,

I'm experiencing a weird problem: I've got some divs that I assign a certain height to via css:


<div id="header">
<div id="header1">
</div>
<div id="header2">
</div>
<div id="header3">
</div>
<div id="header4">
</div>
<div id="header5">
</div>
</div>



* {
margin: 0px;
padding: 0px;
border: solid 1px; /*for debugging*/
}

body {
margin: 0px;
padding: 0px;
}

#header {
width: 100%;
background: url(./graphics/header_background.jpg);
}

#header1 {
width: 100%;
height: 54px;
background: url(./graphics/header1.jpg) no-repeat;
}

#header2 {
width: 100%px;
height: 90px;
background: url(./graphics/header2.jpg) no-repeat;
}

#header3 {
width: 100%;
height: 10px;
background: url(./graphics/header3.jpg) no-repeat;
}

#header4 {
width: 100%;
height: 21px;
background: url(./graphics/header4.jpg) no-repeat;
}

#header5 {
width: 100%;
height: 6px;
background: url(./graphics/header5.jpg) no-repeat;
}


Now what happens is that div 3 and div 4 have a height of 20px instead of the expected 10px and 6px. It seems as if the minimum height for a div is 20px. I can't remember ever having read about this minimum, so I guess something else must be wrong in my style sheet. Anyone any ideas?

Thanx, Michiel

#header4 {
font-size:0;
line-height:0;
}Or just put the opening and closing tags on the same line without any white-space between them.

The no-white-space trick doesn't work in this case (in my IE6/Win setup anyway). Setting font-size to 0 works fine. Of course if you need to have text in those boxes, you'll want to set font-size to the appropriate readable size.

An interesting side-note, if you do set font-size to 0 then put text in, IE still shows the text (albeit at a very unreadable 1px), whereas Mozilla doesn't show the text at all.

That's because IE won't shrink it below 1px.
Apart from font-size, setting overflow to hidden works:
<div style="font-size:20px;overflow:hidden;height:4px;border:solid 1px windowtext">text</div>