more than one image for a product

I got my problem solved from an info I found in another thread--but wanted to post what I did in case someone else was having the same problem.

I added:

#productAdditionalImages {
width: 200px;
}

to my stylesheet, it moved both images over and put the "larger image" text underneath them. You might need to adjust the 200px, but the width worked well for me.

You're using the Dotline mod (not sure of its official name) which is what creates the table and is nost likely responsible for the spacing. I don't know anything about its workings; you might ask the author. I presume there is a support thread for it.

Nevermind... :) but the table comment is still true.

Well, since I got the spacing problem figured out, the dotted line is fine now. When I change the width number for the additional images, it moves with them--so it can stay!

Hello gjh42,

I was wondering if I could rack your brain again.

I am looking to get the additional images under the main image.

I had it working before on my site when I was using 1.37, however I don't seem to have it working on 1.38.

The link is here:

http://xmanhosting.com.au/shop/index.php?main_page=product_info&cPath=3&products_id=3

Any help would be greatly appreciated.

Kind regards,
Anthony

Hello,

I found that if I change:

#productMainImage img {
margin: 1em 0em 3em 0em ;
float: right;
}

to :

#productMainImage img {
margin: 1em 0em 3em 0em ;
float: left;
}

The images are alligned to the left. However if it says: float: right; the main image moves to the right, however the additional images stay where they are:

Is it something to do with this part of the code:

#productAdditionalImages img {
margin: 1em 0em 1em 0em ;

float: right;
}

Kind regards,
Anthony

Your main and additional images appear to be both aligned to the right now, within the width of #productImagesWrapper. Do you still have a problem?

Hi gjh42,

Thanks for the reply.

It still apears non aligned in my browser (IE6)

I have attached a screenshot.

Kind regards,
Anthony

Great... IE strikes again. Since it works in Firefox, it's probably coded right. It will take some looking at to see what IE is having a problem with. You might try validating the HTML and CSS with the w3c validator, to see if that picks up any errors...

Hi gjh42,

Thank you for the reply.

The bummer part of this is that there were no problems when I was trying to achieve what I am asking about using zen 1.37, however it only seems to occur when using zen 1.38

Thanks for having a look at it anyway.

Kind regards,
Anthony

Hi gjh42,

I downloaded Firefox to see what it looked like when I viewed it through a different browser.

It produced a different (worse error) than with IE6

I have attached a screenshot

Did it look normal in your view?

Kind regards,
Anthony

That's not a browser display error. It is the expected behavior when an element is too big to fit in the space assigned for it - it will overflow out of the box. In this case, since the image is floated to the right edge, the "loose" edge is on the left and it expands there.

If you are going to define the image area to be 200px wide, you need to make sure your images are not more than 200px wide.

I have successfully moved my add. images up where I want them but can not get more than 5 images across.

Also I saw on someones site they had their additional images in a box. How can I do that?

i was able to follow the directions in this thread to get my additional images under my mine image & remove the "larger image" link however, there is a large amount of space between the main & additional images. can someone tell me what i need to do to raise my additional images higher so they are directly under the main image?

here is what i am talking about:
http://chielleshop.com/shop/index.php?main_page=product_info&cPath=2&products_id=6

also, i want to align my manufacturer logo under the additional images. any help is appreciated.

The main image and additional images are far apart in the code; you need to move the entire

block up to just below

and then move the

line up to just above

Once that is done, we can see what other styling will be needed.

that did not bring the images up below the main image, it simply moved everything else under the additional images.

You have cumulative margins and padding on the images and image wrappers that are forcing the space.

As I expected, you will need to add to your stylesheet```
#productImagesWrapper {float: left;}

#productDescription+.clearBoth {display: none;}

The #productDescription+.clearBoth is a stopgap; it will not work in IE6. 
You should go into tpl_product_info_display.php and remove the class="clearBoth" below the description, and probably also the one after the add to cart code.

glenn, you rule!

but if i remove the second clearboth it puts the "tell a friend" next to my cart. it does not bring the cart up under the description. any ideas? also, the images don't seem to have extra padding/white space & yet, are still rather low.

i really appreciate your help.

any ideas?

Sorry for the delay, I've been out of town.

You have an unidentified div ```html

              <div id="cartAdd">

Add the same properties to 
#productTellFriendLink {float: right; clear: right;}
and that will sit under the add to cart.