Centering additional images

[raskayu]

Hi:

I've observed that including in the product info page more additional images than a row (I actually use rows of 4 icons), the second and following rows don't get the images centered. However the first one does.

I mean that if I use only 1 to 4 additional images, they got centered in the first row,but if I use 6, the 4 of the first row are perfectly centered but the 2 in second row got aligned to the left. Is there an easy code change to solve this small issue?

Zencart version 1.3.01

Thanks

[kuroi]

Hi:

I've observed that including in the product info page more additional images than a row (I actually use rows of 4 icons), the second and following rows don't get the images centered. However the first one does.

I mean that if I use only 1 to 4 additional images, they got centered in the first row,but if I use 6, the 4 of the first row are perfectly centered but the 2 in second row got aligned to the left. Is there an easy code change to solve this small issue?

Zencart version 1.3.01

Thanks

INteresting problem. Can you post a link to a site where this behaviour is visible?

[raskayu]

I sure can.

Here is the link:

http://www.lluque.com/3dcart/index.p...products_id=41

And here you can see how 2 thumbnails got correctly centered in first row

http://www.lluque.com/3dcart/index.p...products_id=48

You must use firefox to see the 4 thumbnails of the first row centered.

There is an issue using IExplorer that make 4 thumbnails splitted in 2 rows (3 and 1 blank space and 1 and 3 blank spaces), as I explained in this thread:

http://www.zen-cart.com/forum/showthread.php?t=35403

Still waiting for a solution for that.

However if you go to specials category, you can see all thumbnails well aligned from 4 to 4 no matter if you use Explorer or Firefox..

http://www.lluque.com/3dcart/index.p..._page=specials

I have no idea why this is happening.

Thanks for all.

[kuroi]

if I use only 1 to 4 additional images, they got centered in the first row,but if I use 6, the 4 of the first row are perfectly centered but the 2 in second row got aligned to the left. Is there an easy code change to solve this small issue?

No. This behaviour comes from Zen Cart's core code. Specifically, when you have 2 additional images to be displayed, Zen Cart puts each in a div with width 50%, when you have 3 it calculates the div widths to be 33% and when you have 4, 25%. When you wrap round to the next line, it continues to us the same div width. This is because the width is calculated once and not for each line. To fix this you would need to rework the section of addition_images.php that follows the "Build output based on images found" comment to recalculate $col_width for each line.

There is an issue using IExplorer that make 4 thumbnails splitted in 2 rows (3 and 1 blank space and 1 and 3 blank spaces), as I explained in this thread:

http://www.zen-cart.com/forum/showthread.php?t=35403

I've had a look at the thread and your site in Internet Explorer and can't find any examples of the behaviour that you describe.

[Kim]

Kuroi is correct about the way the columns and rows are calculated. Unless you want to make some complicated calculation coding I would suggest you use 3 per row. Odd numbers are more pleasing to the eye. The pages where you only have 2 additional will still center nicely.

[raskayu]

Not a major problem the way that the second row is aligned in additional images, I just mentioned this, case that it was a coding error or something. For me is OK.

I've had a look at the thread and your site in Internet Explorer and can't find any examples of the behaviour that you describe.

What really annoy me is the way that Explorer shows the New products for month, as it seems that you can see what I am trying to explain, here you have an image of what I am saying.

Firefox - Explorer Issue

This can be checked in the MAIN page

However, and as I explain im previous post, all works perfect in Explorer if you select the Specials category that have 4 images per row too. So, must be an slighty differnece in the code of Specials page and New products for... page.


Thanks!!

[Kim]

You problem with IE is because of their faulty "box" model. IE adds padding and margins outside the width specified. If you make your images slightly smaller or check any padding or margins or change to 3 images per row it will work fine.

[kuroi]

You problem with IE is because of their faulty "box" model. IE adds padding and margins outside the width specified. If you make your images slightly smaller or check any padding or margins or change to 3 images per row it will work fine.

I agree with Kim that this is probably the fault of Microsoft's crappy box model implementation.

However, I believe that if you change this

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

to this

centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsAlsoPurch {
margin: 1em -0.1em 1em 0;
}

.centerBoxContentsSpecials, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em -0.1em 1em 0;
}

it might put a smile on your face. Not perfect, but a helluva lot better.

[raskayu]

No, Kim.

It is not because that.

I tested changing the size of the images from 128x128 to 100x100 and still the problem continues.

And here you have the prove:

resized to 100x100

2 sideboxes*160= 320 px
1000 width that I set up - 320= 680 px

128x4= 512 px still far from the 680
Resized to 100
100x4? 400 px still more far

Look at the Image

And now I changed to 128 again and 5 thumbs per row.

Same problem. Good in Firefox, bad in Explorer and as you can see Explorer fit 4 icons in a row without problems, so it's the code for sure.

Look at the Image

:)

[raskayu]

I agree with Kim that this is probably the fault of Microsoft's crappy box model implementation.

However, I believe that if you change this

to thisit might put a smile on your face. Not perfect, but a helluva lot better.

Posts crossed!!

Aleluya!! or whatever it was in english. LOL

All fixed now, that was the trick. kuroi.

Now I only need to fix the issue hidding products with zero price in "customers who bought ..." as I asked in another thread and all done.

You guys are the best!!

Regards!!!