offsetTop bug in IE 6

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

offsetTop bug in IE 6

Post by newmember »

Hi

I discovered bug in IE 6 (windows sp2) with offsetTop property...
I'll put here a paste&run example that demonstrates this ugly :evil: bug...

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>
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'...

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>
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...
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post by newmember »

i managed somehow to fix the bug in my original code...
by setting position relative on my inner most div (the div that holds letters)

now i'm trying to figure out what part of tweak actually fixed the problem...
trying the same thing for the example doesn't work...
so i guess there is some sort of dependance from earlier elemenents...
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post by newmember »

ok... the actual fix...
what is neccesary here is:

#wrapper{width:200px;}
#withbug{position:relative;}

if you set width:200px on #withbug itself the bug will reappear...
if you ommit position:relative on #withbug the bug again will reappear...

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;}
#wrapper{width:200px;}
#withbug{position:relative;}

#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 id="wrapper">
	<div id="withbug">
	this line of text should wra<span id="before">p</span> <span id="bug">h</span><span id="after">e</span>eeeeeeeeeeeeeeeeere.
	</div>
</div>
<form><input type="button" id="test" value="Test" name="test"></form>
</body>
</html>
i really happy that this one so easy...(although not so obvious)...
i can continue as i planned :D
Post Reply