Hi sfgl,
Thanks for the suggestion. I added this:
#productMainImage {margin: 0px auto;}
But it didn't work.
And, actually, I tried that many times and in many variations prior to posting. I should have mentioned that. I know how to center images using css, I just couldn't get it to work.
SOLUTION TO #1:
As it turns out, a class (.back) was being added in the product image module (/includes/templates/MY_TEMPLATE/templates/tpl_modules_main_product_image.php). Here is the offending line:
<div id="productMainImage" class="centeredContent back">
I simply removed " back" and it worked like a charm!
SOLUTION TO #2:
Similar to the above situation, a class called additionalImages was being applied and receiving margins along with a big group of other classes (centerBoxContents, etc). I stripped it out and brought it to the bottom so that I could apply my own margins. Worked out well.
++++++++++
Because I cleaned up the code and changed the css, I'll now repost the fixed code & css. Your results may vary, good luck!
Here is the code for tpl_product_info_display.php:
Code:
<!--bof Poduct Image with Additional Images in a grid -->
<div id="pi-left">
<!--bof Main Product Image -->
<?php
if (zen_not_null($products_image)) {
?>
<?php
/**
* display the main product image
*/
require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
}
?>
<!--eof Main Product Image-->
<br class="clearBoth" />
<!--bof Additional Product Images -->
<?php
/**
* display the products additional images
*/
require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->
</div>
<!--eof Poduct Image with Additional Images in a grid -->
And here is the CSS:
Code:
/* styles for Poduct Image with Additional Images in a grid */
#pi-left{float:left;margin-bottom:20px;margin-right:10px;width:235px;background:#f4f4f4;border:1px solid #dbdbce;padding:10px;}
.additionalImages{margin-bottom: 10px;}
#productAdditionalImages {margin-bottom: -8px;}
Bookmarks