Help with CSS border around Description

[niccol]

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)

[gjh42]

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.

[Redcinamn]

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

Your suggestions worked like a charm.

http://www.tylerandtallulah.com/shop...er-2010-p-1269

[gjh42]

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;
	}

Remove #productMainImage, from the second rule so it stays set as you had it.

[niccol]

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

http://www.tylerandtallulah.com/shop...-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....

[Redcinamn]

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 :)