Help with CSS border around Description

Hi guys,

I wonder if someone could help me with this border around the description on the product page. It seems the border will not collapse around the description itself leaving it to melt into the main image to the left.

See screen shot :

I have marked where the border continues and ends. Can some help me with this. I know there is something I should probably be adding to this: maybe collapse border? But Im not sure. Thanks in advance.

#productDescription {
/font-size: 1.2em;/
padding: 0em;
text-align: left;
border-style: inset;
}

It is because the image is floated left. So, the text is pushed left to avoid it but the border still stays the same shape. Why? because the css pixies say so.

You can work around it by adding a left margin to the description which matches the width of the image.

Actually a good way of understanding why is to imagine that the text is much longer and extends beneath the image. It would wrap under the image and be full width. (This is an ugly problem on some sites that can be remedied with a left margin). So the width of the text element is actually the full width. So the border is full width.

Thank you so much for your reply. I have been playing around with the code and implemented your suggestion. We have set the margins at a largest possible width of the largest image ( as some images are different sizes in width). I was wondering if there is a better way to handle this since their product images are very random. Does this require a heavily modified theme to get this to align?

Thank you!!
Red

Is your layout fixed width or fluid?

Her layout is a fixed width.

There are some product info page layout mods in Free Addons that have various arrangements of elements, and one of them might be a good base to get your page the way you want it.

Glenn's advice is spot on.

My thoughts:

A pure css solution may not be immediately possible. But maybe someone with more smarts than me will come up with one.

You could undoubtedly come up with a javascript solution that re-sized the definition to fit with the size of the image. But that is a 'not nice' solution and apart from the obvious drawbacks that using javascript might have is a lot more work than A one-liner in a forum.

A php solution is possible that read the size of the image and set the left margins to match it but again not a one-line answer.

You could re-write tpl_product_info_display.php so that instead of using the present <div> and floated image scenario it uses (dare I say it) a table. A html table would behave in exactly the way you want. It is considered bad form to use tables for layout purposes but given that the major structure in Zen Cart already uses tables I can't really see the problem.

That wouldn't be too hard an edit.

But here are some questions. Do you absolutely have to have the border? Do you absolutely have to have varied image sizes? (Zen Cart can re-size them so there are all the same width)

To get around the different width images leaving variable spacing to the description (which is given a fixed margin-left), you can give #productMainImage a fixed width large enough to fit any image you will use, and then style

#productMainImage {text-align: right;}

or

#productMainImage img {float: right;}

This will keep the association between image and text constant, allowing variable spacing to the left of the image. This may or may not work for you esthetically. See my site for an example.

Thank you both for your help!!! As you can see here:

Your suggestions worked like a charm.

http://www.tylerandtallulah.com/shop/jottum-spring-summer-2009-c-15/jottum-brown-kinalo-wrap-sweater-winter-2010-p-1269

:clap:

I notice that the image is still not aligned right in the main image container. You have set this:/*Image Display*/ #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage { width: 450px; margin: 1em 1em 1em 0em ; text-align: right; }but this later in the stylesheet overrides it:```
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}

And unfortunately you still have an issue with at least one product.

http://www.tylerandtallulah.com/shop/girls-outerwear-c-129_146/nolita-pocket-samurai-zipper-sweatshirt-winter-p-1265

IMHO I would use Zen's image re-sizing capabilities to re-size the images on the product_info pages to the same width. I haven't looked at all the products but most of the images appear to be similar (ish) in width and making them all, for instance, 450px wide (choose whatever width the smallest image is) would not be a problem and would make your layout issues much simpler.

Have a look at the settings in admin>>catalog>>images for the settings to do this.

If this doesn't suit you then just ignore me. It isn't any of my business really....

lol I completely agree and I have been resizing the ridiculously large images :) I will set a size in the admin section I thought I did that but maybe not. And thanks for sticking your nose in my business!! I appreciate it :)
Red

set the size to 2px below the set size :)