Additional images - how to place / move them as wished?

[petitplat]

I'm using Zencart version 1.3.9b

I did change the order on my product page using the FAQ but I have a few issues.

1. Additional images
Here:
http://www.petitplat.fr/zencart/inde...roducts_id=214

The additional images show up as a column, and I'd like to have them in a grid way.

Which weirdly is the case here:
http://www.petitplat.fr/zencart/inde...roducts_id=251

But if possible with less "space" between the pictures.
Ideal would be a grid of 6 pictures (3 columns, 2 rows)

2. Add to Cart button emplacement

When I have attributes, it looks good:
http://www.petitplat.fr/zencart/inde...roducts_id=251

But when I don't, the add to cart button is beneath the "review" and "tell a friend". which is a little odd:
http://www.petitplat.fr/zencart/inde...roducts_id=247

(if it's too complicated I can indeed add a text attribute which will solve the problem)

Thanks in advance!

[haredo]

One thing I notice is look at the size of the images...

The one you like: 650px × 606px (scaled to 215px × 200px)

One that is messed up.. 650px × 486px (scaled to 267px × 200px)

[petitplat]

One thing I notice is look at the size of the images...

So the reason would be that the image is too large? It would just work fine with a square image? (just making sure I understood you right. English is not my language)

[haredo]

I use Firefox with a add on called Firebug which allow me to dig into the html and view images and make changes to images, classes and Id's..

When i change your image to scaled to 215px × 200px), yes, now i get 2 additional images to the right of the picture, but the 4th and 5th image wraps under the main image... Not good...

[petitplat]

Oh weird.

I always see 2 images on the right and the rest just under the main image.

Except here http://www.petitplat.fr/zencart/inde...roducts_id=251
where the 3 images are on the right of the main image.

And I use firefox as well (latest version)

[haredo]

Use firebug and duplicate this on the left pane..

<div id="productMainImage" class="centeredContent back"><img role="presentation" class="twisty "><script type="text/javascript" language="javascript">

<img role="presentation" class="twisty "><a title="Monochrome - Post Earrings" rel="lightbox-g" href="images/bijoux_bo/BO_Donuts_St_RainbowMonochrome.jpg">
<img height="200" width="267" title=" Monochrome - Post Earrings " alt="Monochrome - Post Earrings" src="images/bijoux_bo/BO_Donuts_St_RainbowMonochrome.jpg">

<br>

<span class="imgLink">larger image</span>


</a>

change the 267 to 215, and you will see what i see..