Help with CSS border around Description

[Redcinamn]

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

[niccol]

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.

[Redcinamn]

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

[niccol]

Is your layout fixed width or fluid?

[Redcinamn]

Her layout is a fixed width.

[gjh42]

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.

[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.