offsetTop bug in IE 6
Posted: Sat Aug 20, 2005 10:18 am
Hi
I discovered bug in IE 6 (windows sp2) with offsetTop property...
I'll put here a paste&run example that demonstrates this ugly
bug...
after you run this code you will see a line of text inside div..
that line is intentionally wrapped at known location(on letter 'h').
after you click test button you will see that offsetTop property of this very first letter 'h' is calculated as if 'h' was still belong to first line... and offsetTop values for letters preceding 'h' and after it are included for comparison...
and here is the same sample again but this time i inluded explicitly <br> exactly were earlier was implicit line break...and now IE calculates the correct value for 'h'...
bottom line... in my case this bug ruines my planes....
i was working on some sort rich format javascript textbox...i kept each letter wrapped inside span and i calculate the position of cursor according to offsetTop and offsetLeft values of span...so now i have to think about workaround..or domething else
If this bug is already has been reported and there is some kind of fix... please let me know...
or if you have an idea how to fix it please tell it...
N.B.
I'm curious if this bug still exists in IE7 beta... if it does it migth be a good idea to let ms guys know about it...
I discovered bug in IE 6 (windows sp2) with offsetTop property...
I'll put here a paste&run example that demonstrates this ugly
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>IE: offsetTop bug</title>
<style type="text/css">
body{padding:10px;}
div{width:200px;border-style:solid;border-color:#000;border-width:1px;}
#bug{background-color:#f00}
#before,#after{background-color:#0f0}
</style>
<script type="text/javascript">
window.onload=runtest;
function runtest()
{
var b=document.getElementById('test');
b.onclick=showOffsetTop;
}
function showOffsetTop()
{
var l0=document.getElementById('before');
var l1=document.getElementById('bug');
var l2=document.getElementById('after');
var mes="offsetTop for 'p'="+l0.offsetTop+"\noffsetTop for 'h'="+l1.offsetTop+"\noffsetTop for 'e'="+l2.offsetTop;
alert(mes);
}
</script>
</head>
<body>
<div>
this line of text should wra<span id="before">p</span> <span id="bug">h</span><span id="after">e</span>eeeeeeeeeeeeeeeeere.
</div>
<form><input type="button" id="test" value="Test" name="test"></form>
</body>
</html>that line is intentionally wrapped at known location(on letter 'h').
after you click test button you will see that offsetTop property of this very first letter 'h' is calculated as if 'h' was still belong to first line... and offsetTop values for letters preceding 'h' and after it are included for comparison...
and here is the same sample again but this time i inluded explicitly <br> exactly were earlier was implicit line break...and now IE calculates the correct value for 'h'...
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>IE: offsetTop bug</title>
<style type="text/css">
body{padding:10px;}
div{width:200px;border-style:solid;border-color:#000;border-width:1px;}
#bug{background-color:#f00}
#before,#after{background-color:#0f0}
</style>
<script type="text/javascript">
window.onload=runtest;
function runtest()
{
var b=document.getElementById('test');
b.onclick=showOffsetTop;
}
function showOffsetTop()
{
var l0=document.getElementById('before');
var l1=document.getElementById('bug');
var l2=document.getElementById('after');
var mes="offsetTop for 'p'="+l0.offsetTop+"\noffsetTop for 'h'="+l1.offsetTop+"\noffsetTop for 'e'="+l2.offsetTop;
alert(mes);
}
</script>
</head>
<body>
<div>
this line of text should wra<span id="before">p</span> <br><span id="bug">h</span><span id="after">e</span>eeeeeeeeeeeeeeeeere.
</div>
<form><input type="button" id="test" value="Test" name="test"></form>
</body>
</html>i was working on some sort rich format javascript textbox...i kept each letter wrapped inside span and i calculate the position of cursor according to offsetTop and offsetLeft values of span...so now i have to think about workaround..or domething else
If this bug is already has been reported and there is some kind of fix... please let me know...
or if you have an idea how to fix it please tell it...
N.B.
I'm curious if this bug still exists in IE7 beta... if it does it migth be a good idea to let ms guys know about it...