Main Page valign thumbnails

My site isn't live yet so to see my page you have to go to pages IP address http://69.195.73.76/ . The issue that I am having is that I have only set a max width for thumbnails and not the height in order to keep the images proportional and this causes some of my "new products" on main page to look unaligned. A lot of the time it will look fine, but the images that are a lot wider than they are tall will throw it off (hit refresh a few times and you will notice it). I can see that the images are vertically aligned based off the top of the thumbnail. I was wondering if there is a way I can make it align off of the base of the image. I think this would look ok. Some pictures would still be taller but with all white backgrounds shouldn't be noticeable and it would make the item names be in alignment. Would appreciate any input.

I am sure other folks have a better solution to this but all I do is use a batch editor called photscape (free software) and this allows you to very very quickly add a white border to an image and make every image exactly the same size.

So if you had images all 100px wide but variant in height say 100 x 63 then 100 x 75 - you would add a border to the top and bottom of each one to make it equal 100 then all pictures become 100x100px

In reality I do this with the largest and best image I have - then use the image handler mod (which I see you have) which gives an absolute uniform look throughout the site. On a side note - lovely site.

As I say - I am sure there is a better approach...

Thanks for the reply and feedback on the site stiggy. While I might end up doing that I would like to find a work around that would not require me to edit all my images and future images. I thought I could use something along these lines in my style sheet but It seemed to of had no effect...

Quote:

---

#whatsNew {
color:#ffffff;
align: center;
vertical-align: bottom

}

---

I have found this thread that should help:

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

Hmmm I hadn't thought about trying it like that. It does not seem to be working for me but I think it is because of the div tag.

Quote:

---

.centerBoxContentsProducts {
height: 350px;}

---

When I look at the images with web dev. toolkit in firefox I don't see that .centerBoxContentsProducts is associated to the image. ".centerBoxContentsFeatured centeredContent back" is what comes up.

Well I have decided to go with Batch Editing solution. I am using Photoshop to Fit Image 500x500 > Canvas Size 500x500. Now I will just have to run any future product pics through the batch processor, but no bigey. Thanks for the input stiggy.