Category Listing Box Breaking

[liquidpics]

Hi People,

Got a major problem (well, it is for me), in that my cusomer has switched on "Call for Price" on some products which in turn has broken the container that holds it.

I'm sure it's just about adjusting the php layout in a tpl file?

Is there a schematic of all the Zen Cart pages that points out which file affects which part of the site?

I've attached a screenshot with how it should look inset. If anyone can give me any clues, i'd be very appreciative!

http://www.liquidpictures.co.uk/listings_error.jpg

Thanks in advance

Kristian

[stevesh]

It's much easier to diagnose problems like this if we have a link to the site.

[liquidpics]

Sorry, the site is a shorrocks.co.uk

[liquidpics]

Has anyone got an idea on where I can fix this part of the design, or where I can find a "Roadmap" of the Zen Structure?

[liquidpics]

I'm getting a bit closer. Using Firebug and Firefox (superb piece of kit!) i've found that the products div for centerBoxContentsProducts is 240px wide:

<div class="centerBoxContentsProducts centeredContent back" style="border: 7px solid black; background-color: rgb(255, 255, 255); width: 240px;">

But somewhere, there has to be a width that says how wide the content is, which is why the title and the More info box is overflowing on all product pages such as http://www.shorrocks.co.uk/index.php...70d378c176b80f

Any ideas?

Thankyou.

[gjh42]

This is probably not fixable with your current template layout, which uses tables. If you change the product listing to use divs, the display can be adjusted to be flexible and fit the different possibilities in the same width.

Note that the default Column Grid product listing uses divs, so your customization should be able to be redone.

You have two table cells side by side, and when each contains an image, they expand to fit the image. The combination is too wide to fit in the containing div.

[gjh42]

Also, the div has inline styling which sets the width twice:

<div style="background-color:#fff; width:240px;border:7px solid black;" class="centerBoxContentsProducts centeredContent back" style="width:49.5%;">

The second width supersedes the first, so the div takes 49.5% of the center.