Trying to produce the same results regardless of browser or platform

[perfectdesign]

I'm trying to adapt a script code that controls an mouseOver popup image, but each browser produces different results, and even the same browser on different platforms produce different results.

Here is the page in question :

http://www.huguenotbats.com/redesignfiles/team.php

(just mouseOver the players name)

Here is the script code:

<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");
var node = hoveritem;
var x = 450;
var y = 115;
while ( node != null )
{
x += node.offsetLeft;
y += node.offsetTop;
alert( x + "\n" + y );
node = node.offsetParent;
}

// Set position of hover-over popup
hp.style.top = y + "px";
hp.style.left = x + "px";

//Set popup to visible
hp.style.visibility = "visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>

And here is the html code:

<tr>
					<td width="10%" align="center">
					1
					</td>
					<td width="45%" align="center">
					<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();" href="bio/amentbio.php" target="_blank" onClick="window.open('bio/amentbio.php','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Ryan Ament
					</a>
					<div id="hoverpopup" style="visibility:hidden; position:absolute; top:100px; left:350px;"><img src="bio/amentthumb.png"></div>
					</td>
				</tr>

When tested on a Mac (OS X 10.3.9) -

in Opera the placement of the popup image is perfect
in Safari the image is too far down and to the left
in IE the script won't run at all (Error - Invalid procedure call or argument @ Line 13)

When tested on a PC (XP Home Service Pack 3)

in Opera the placement is perfect
in IE the placement is only slightly too far down

I can't find any rhyme or reason for the discrepancy and I've been stuck for days trying to figure it out. I'd really appreciate any help.

Crystal

 

[BillyRayPreachersSon]

1) Do you have a complete and valid DOCTYPE?

2) Does your HTML validate?

3) Does your CSS validate?

If the answer to ANY of those is 'NO' then fix the issues until the answer to all is 'YES' and then post the full HTML & CSS (not just a portion of) or a URL to the page in question.

You also don't say whether your site is centred or not... perhaps the browsers all have different widths which might account for the discrepancy.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/