Floating Layer At Cursor Position, Fine in FF all over the place in IE, how to solve the IE problem?

Pushed a bit for time on this project and beginning to pull hair out!
I have a script that show a hidden div layer on rollover and hides on rollout. the div layer displays according to the cursor position.
I want the layer to appear on rollover of a section of an image (which happens).
The script allows the position of the div layer to be offset from the cursor position by changing x and y variables. All good.
However whilst it is consistent in FireFox it's all over the place in IE according to how far the page has been scrolled down. For example if the page is right at the top,  on rollover my div layer appear cut off at the bottom of the screen with the div layer roughly to the side and middle of the cursor position. If you then scroll down the page to avoid the div layer cutting off then rollover again the div layer appear cut off at the top of the screen and above the cursor position (as opposed to middled).
I think the script would be great if I could get at least some consistency when opening in IE, any thoughts?

An example of what I am testing can be found here: http://www.quinndirectbritishmasters.com/ism/sites/masters/2007/course3.php
Just rollover hole 1 on the course to see what I mean.

My script was from here:
http://www.willmaster.com/blog/css/Floating_Layer_At_Cursor_Position.html

CSS relating to the hidden div is:
div#uniquename3{
      color: #000000;
      display:none;
      position:absolute;
      border-style: solid;
      background-color: white;
      padding: 5px;
      height:400px;
      width: 247px;
}

the div layer looks like this:
<div id="uniquename3"
   ><img src="images/hole1.jpg" />
</div>

the rollover effect on a image map looks like this:
  <area shape="poly" coords="529,192,450,275,371,315,307,329,296,316,336,288,389,256,457,219,518,181" onmouseover="ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')" alt="the 1st"  />
(only important bit the href and onmouse effects.)

The javascript is as follows:
var cX = 0; var cY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
d.style.left = (cX+5) + "px";
d.style.top = (cY-150) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}

I've been changing the d.style.left = (cX+5) + "px";
d.style.top = (cY-150) + "px"; to offset the alignment.

Any though on how to get consistency in ie even if it is different to Firefox so that I at least come up with a consistent compromise.
Regards
bangers