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
