Well, you need to understand the 'override system'. I'll PM you later today with a bit more info about how this works and how Zen 'chooses' which file to use. But there are good tutorials about it too!
Look at includes/templates/default template/popup_image/tpl_main_page.php
It has the following:
<body id="popupImage" class="centeredContent" onload="resize();">
<div>
<?php
// $products_values->fields['products_image']
echo '<a href="javascript:window.close()">' . zen_image($products_image_large, $products_values->fields['products_name'] . ' ' . TEXT_CLOSE_WINDOW) . '</a>';
?>
</div>
</body>
it is the onload="resize();" that is resizing the popup after it has loaded. You see the popup in one place and then it flicks to another place, right?
resize() is a function that is defined in-- includes/modules/pages/popup_image/javascript_main.php
What it does it attempt to resize the popup to the right size for the image. This is hard to do for every browser (browsers render popups differently) ! And the definitions are a little bit out of date! That's why the windo isn't the right size for your image.
So, either fiddle with this file to try and rectify the issue for the browsers that you care about. Or...
Go back to the code that is quoted further up this post and add some styling straight into the code. For instance:
<body id="popupImage" class="centeredContent" style="" onload="resize();">
<div style="border:red 1px solid;">
<?php
// $products_values->fields['products_image']
echo '<a href="javascript:window.close()">' . zen_image($products_image_large, $products_values->fields['products_name'] . ' ' . TEXT_CLOSE_WINDOW) . '</a>';
?>
</div>
</body>
This file is pretty straight forward html so you can do what you want with it.
But, yes you should leave the default version as is and edit the 'override' version in your template. Edit:
includes/templates/YOURTEMPLATE/popup_image/tpl_main_page.php
If it does not exist then you need to create it by copying it from the default tamplate.
