See: http://www.mattkruse.com/temp/offsetleft.html
It appears that the offsetLeft value in IE6 (other versions not tested)
incorrectly ignores the border width on a DIV when there is a width:
property specified. Without a specified width: it gets it correct.
Does anyone know
1) If this is a known bug, and if it affects any other browsers? I tested a
few and found no problems.
2) Is there a work-around for this to arrive at the correct value which will
not break other browsers which already get it right? Resorting to browser
sniffing is not my preference.
For discussion purposes, here is the content of the url above. Beware, lines
may wrap inappropriately.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body { margin:0; }
</style>
</head>
<body>
<hr>
<B>In IE6, this reports "offsetLeft of span from BODY is: 35" which is
correct (10px border + 25px padding)</B>
<br>
<pre>
<div style="border:10px solid black; padding:25px;
background-color:yellow;">
<span id="span1">span</span>
</div>
</pre>
<div id="div1" style="border:10px solid black; padding:25px;
background-color:yellow;">
<span id="span1">span</span>
</div>
offsetLeft of span from
<script type="text/javascript">
document.write(document.getElementById('span1').of fsetParent.nodeName)
</script>
is:
<script type="text/javascript">
document.write(document.getElementById('span1').of fsetLeft)
</script>
<br>
<br>
<hr>
<B>In IE6, this reports "offsetLeft of span from DIV is: 25" which is
incorrect. The 10px border is ignored. The only difference is that this DIV
has a width specified.</B>
<br>
<pre>
<div style="border:10px solid black; padding:25px;
background-color:yellow; width:200px;">
<span id="span2">span</span>
</div>
</pre>
<div id="div2" style="border:10px solid black; padding:25px;
background-color:yellow; width:200px;">
<span id="span2">span</span>
</div>
offsetLeft of span from
<script type="text/javascript">
document.write(document.getElementById('span2').of fsetParent.nodeName)
</script>
is:
<script type="text/javascript">
document.write(document.getElementById('span2').of fsetLeft)
</script>
</body>
</html>
--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
