Curious IE "feature"

[titch]

A curious problem I've encountered which can be seen with a simple piece of HTML:

 <div id="a" style="position: absolute; top:5px; left: 5px; width:100px; height:100px; border: 1px solid red;">
    <div id="b" style="position: absolute; top:0px; left: 0px; width:100px; height:99px; border: 1px solid red;"></div>
    <div id="c" style="position: absolute; top:99px; left: 0px; width:100px; height:1px; border: 1px solid red;"></div>
</div>
 
<br /><br /><br /><br /><br /><br /><br />
 
<script type="text/javascript">
    document.writeln("style height: "+ document.getElementById("c").style.height+"<br />");
    document.writeln("client height: "+document.getElementById("c").clientHeight+"<br />");
    document.writeln("offset height: "+document.getElementById("c").offsetHeight+"<br />");
</script>

This is supposed to generate 3 divs: a 100x100 box containing to more boxes, the first 99x100 in size, the second 1x100 in size. This is not what happens with IE 6.0, though (i haven't tested IE 7.0 yet). In Firefox 2.0 and Opera 9 works as you would expect, viewing in IE 6.0 expands the second inner div to 19px or so..

I have no idea what is going on here... I tried a few extra style attributes (like line-height:0px) but haven't found anything to remedy the situation...

Inspecting the DOM, IE shows the correct style attributes (i.e. height: 1px) but theclientHeight and offsetHeight attributes are both 15px...

You can see images of what is displayed here:
http://blog.bluecaldera.com/2006/11/...s_ie_feat.html

Any help would be greatly appreciated!

Thanks

[titch]

A curious problem I've encountered which can be seen with a simple piece of HTML

OK, problem solved!

Adding a "line-height:0px" property to div C solved the problem. I am certain I tried this before, but I tried it again whilst playing around with some other properties, and it worked this time.. I have no idea why it didn't work the first time!

Adding "overflow: hidden" also does the trick.