Align Additional Images

[mh71888]

This is driving me batty. I cannot get the additional images to form a nice neat row. They just want to sit on top of each other.

I've got it set to have 3 images in a row in the Admin.

I can't tell if this is a style problem or something else.

Can someone look here and tell me what you think?

http://www.threestonesteps.com/cart/...&products_id=1

Ideally, those extra views would fit right under the big image.

[jettrue]

This is driving me batty. I cannot get the additional images to form a nice neat row. They just want to sit on top of each other.

I've got it set to have 3 images in a row in the Admin.

I can't tell if this is a style problem or something else.

Can someone look here and tell me what you think?

http://www.threestonesteps.com/cart/...&products_id=1

Ideally, those extra views would fit right under the big image.

Well, its because you are out of room. The biggest problen is that there is no line break before the "larger image" link. There is a line break in a default zen install, so it looks like you changed that. If you can get the <br /> back right before: <span class="imgLinkAdditional">, then you'll have more space. I would reupload the original includes/modules/additional_images.php. Also, you can decrease the margin and padding on .additionalImages:
.additionalImages {margin:0!important;padding:0!important}

[mh71888]

Thank you. It wasn't the line break tag, though (I took that out in order to try and fix it). It was the padding and margin. I probably just made it worse by taking out the line break. It's back now anyway. Thanks again.

[tatiana77]

I'm having a similar problem, any help?

http://www.wolfandrabbit.com/index.p...roducts_id=187

TIA

[jettrue]

I'm having a similar problem, any help?

http://www.wolfandrabbit.com/index.p...roducts_id=187

TIA

Replace these section from your product_info.css with this:

#productAdditionalImages {
margin:0 auto;
width:100%;
clear:both;
text-align:center;
}

.additionalImages {
width:100%;
padding:0;
float:left;
margin:0 auto;
text-align:center;
}

.additionalImages img{
border:1px dashed #ff4474;
}

[tatiana77]

holy smokes you're a genius!!

Thank you thank you thank you [jumps for joy]

[breathes sigh of relief]

[tatiana77]

hi jettrue,

I've been having a similar problem.. as you can see I put:

#productMainImage {
padding: auto;
position:absolute;left:285px;top:285px
}

in my product_info_display, and I know from past experience this is a quick bandaid fix to position this main image, especially when it came to nice alignment in IE7... my question is, is there a proper way of aligning it to look like this? When my image slightly too high it overlaps the thumbnails beneath it instead of just shifting them down properly ... here's the link, hope you can help.

http://www.wolfandrabbit.com/index.p...roducts_id=189

TIA

PS It looks okay in IE7, but overlapping TN's in Firefox at the moment.

[jettrue]

hi jettrue,

I've been having a similar problem.. as you can see I put:

#productMainImage {
padding: auto;
position:absolute;left:285px;top:285px
}

in my product_info_display, and I know from past experience this is a quick bandaid fix to position this main image, especially when it came to nice alignment in IE7... my question is, is there a proper way of aligning it to look like this? When my image slightly too high it overlaps the thumbnails beneath it instead of just shifting them down properly ... here's the link, hope you can help.

http://www.wolfandrabbit.com/index.p...roducts_id=189

TIA

PS It looks okay in IE7, but overlapping TN's in Firefox at the moment.

Way too much css goin' on there :) ... replace the three sections below:

#imagebox {
float:left;
}

#productMainImage {
}

#productbox {
width:55&#37;;
float:right;
}

ETA: Your site looks really nice!

[tatiana77]

Once again, I bow down to the fabulousness that is Jettrue. You are truly my savior of the day (Got kids? Can I cut you a discount on the clothing? )

I can't thank you enough, and I know.. wayyy too much CSS...

Tatiana

[julie.t]

I am also having trouble getting the additional images to line up horizontally. I have moved them right underneath the main image and they are going down in a row instead of in columns. I have a stylesheet just for this page.

#productAdditionalImages {
clear:both;
margin:0pt auto;
text-align:center;
width:100%;
}
.additionalImages {
float:left;
margin:0pt auto 18px;
padding:0pt;
text-align:center;
width:100%;
}

.additionalImages img{
border:1px dashed #C5CEA5;
padding: 5px;
}

I have tried most of the fixes posted here but still no luck. If someone could take a look that would be great. Here is a link to the page.

Hope you can help