In some versions of IE, there is a thin 2px border surrounding the document view port. I haven't noticed it for any other browsers yet. This poses a slight problem in calculating mouse positions for the page and client areas. Originally, I simply subtracted 2 from each of the calculations to account for the border.
But then, when I tested it in different versions of IE and different IE embedding programs, I noticed that in some cases, there is no border. So, simply doing a check for IE and subtracting 2 won't cut it.
Is there any way of getting the document view port border in IE?
Example1: finding mouse position inside object
<html>
<head>
<script>
var isIE = (!window.addEventListener);
window.onload = function(){
var foo = document.getElementById('foo');
if (isIE) foo.attachEvent('onmousemove',check_coords);
else foo.addEventListener('mousemove',check_coords,false);
}
function check_coords(e){
var foo = document.getElementById('foo');
var objPos = getPos(foo);
if (isIE) mObj = [window.event.clientX+document.body.scrollLeft-objPos[0], window.event.clientY+document.body.scrollTop-objPos[1]];
else mObj = [e.pageX-objPos[0], e.pageY-objPos[1]];
foo.innerHTML = mObj;
}
function getPos(obj){
var pos = [0,0];
while (obj.offsetParent){
pos[0] += obj.offsetLeft;
pos[1] += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
</script>
<style>
body{
margin:0px;
padding:0px;
}
#foo{
border:3px solid black;
position:absolute;
left:30px;
top:52px;
width:300px;
height:800px;
background-color:yellow;
}
</style>
</head>
<body>
<div id='foo'>Test test</div>
</body>
</html>
At coordinate [0,0], Internet Explorer (the one's that have the border) returns [2,2]
Example2: getting scrollbar width
alert(screen.width-document.body.clientWidth);
With a scrollbar width of 17px, Internet Explorer (versions that have the border) returns 21px, not accounting for the 2px borders on each side.