Anyone know why the first image link wants to expands from the center of the page and not from center of the image when body margin is set to 0px? The second image always expands correctly from the center of the image no matter if set to 0px or not. Setting the margin to just 1px will force the first image to expand correctly.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript" src="/highslide/highslide-with-html.js"></script>
</head>
<body style="margin:0px;">
<a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
<a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
</body>
</html>
This was similar but I still can't figure it out. Highslide: Issues re-shrinking image
As it turns out any image fails when directly next to body margin 0px. Workaround is to place image or container 1px or more away.
Can't tell you why it's happening, but if it doesn't louse up something else you're trying to do, one workaround is to wrap the thumbnails in a div and put at least a one-pixel margin on that div: