Eliminating wrap-arounds

Since this mod is specifically designed to put the additional images in a column below the main image, your best bet is to uninstall it and do a few tweaks to the base version of the file. Copy tpl_product_info_display.php from the /template_default/ folder to your custom folder. You can move blocks of code in that file to change the display order of elements. You will probably want some of the stylesheet rules from the mod.

That makes sense. Being so new at this, though, I figure I'd get into it and screw something really bad. Though, I guess using the override system, it's pretty easy to undo all that.

I decided to go a little different route that is hopefully a little easier. I'm part of the way there but could use some additional direction. I figured instead of trying to get the additional pictures out of the column (since the mod does such a good job of putting them there) I would just try to fill the extra space next to the pictures with the attributes drop down, the shipping details and the add to cart box. So, in the code, I moved the blocks for each of those inside the "Product Description Wrapper". That only partially worked. The attributes drop down now sits just below the product description. Perfect! But, the shipping info and the add to cart box still end up below and to the right of the last additional picture. Can I move those up so they sit just beneath the attributes drop down?

Thanks!

There is a quirk of floated elements that they seem to reach outside of their container and catch a "clear: none:" property, even when that is in a separate container. Add to your stylesheet_additional_images

Code:

---

#productDescriptionWrapper .clearBoth {clear: none;}
#productReviewLink {float: right;}

---

Fortunately, that seems to work for your layout; some layouts have problems when the clear: both; is removed.

Thanks for the reply. In the meantime I found a slightly different way of doing it that I like. I took the additional images out of the main image wrapper and put them below. Then I put the add to cart box below that. Looks pretty good to me. Thanks so much for all the help. It has made me at least moderately dangerous at this html code stuff!

I'm back with one more, hopefully simple question. When I finished up last week, I thought I had everything set just the way I like it. But, when I opened it up today, I'm seeing a misalignment that I didn't see last week. Again my website is...

www.truehopeinc.com/products

If you go into any of the products you'll see that the main image shows 1st, aligned on the left. Then, the product description is aligned to the right, but positioned below the level of the product image. There is ample space to fit both side by side, so I can't figure out why they are staggered. How do I need to change the code to make these line up? Weird thing is they were lined up fine last week.....

gjh42, does the code you mentioned in your last post on this thread apply here? If so, where do I insert that into the stylesheet? Can it just go anywhere?

Thanks

The page displays fine in Firefox, but IE6 shows the behavior you describe. It appears that the main image is shifted to the right in IE; I can't tell why. I do see an error in your stylesheet_additional_images.css:

Code:

---

#productAdditionalImages .additionalImages a {
    float: center;
    margin-left: 0px;
    }

---

There is no such thing as float: center; and it should be ignored. It may be that instead of ignoring the individual invalid property, IE is ignoring the whole rule and thus not setting the margin-left to 0.
Change float: center; to text-align: center; or float: none; .

Thanks for the tip and checking on it for me! I made the change to text-align: center; and that didn't change anything. But, as I read your message, I realized that last week I updated to IE8 and at that time everything was looking fine. But, at the end of the day on Friday I had a problem loading a work related website so I had to switch to compatibility mode on the IE8 browser. That was still enabled so it was like I was seeing the page in IE6, just like you stated. I turned that compatibility mode off and now it's showing up fine, just like you saw in Firefox. So, I guess I'm all set. Thanks again for the support!

I had been using the CSS mod without an issue until recently. Long story short, I'm adding a new line (print your own design) to the site since I have not had time to build on my template base.

On http://www.wholesale4realtors.com/ca...roducts_id=222

...the product description is overlapping the attributes. I would normally say this is a CSS thing, but the reason I'm stumped is because if you click on any of the template-based products the layout does not do this, so why would it be applying a different set of rules for only the products of the new category?

you know another way to prevent the wrap around is with a table system.

<table><tr><td> main image and other stuff you want </td>
<td>discription etc. </td></tr><table>

http://test.gorillagear.ca/index.php...&products_id=8

I hope someone is still reading this thread otherwise I'll start another. I'm playing around with a new layout based on the Andover Modern template and with the Additional Images with CSS and Image Handler 2 mods. As can be seen here http://www.thegardenercompany.com/bo...&products_id=1, the additional images sit on top of the text. How can this be avoided ? Ideally, I'd like the text to sit underneath the additional images.