Help with overlapping images (featured products)

[twdhosting]

I have been working on the following site www.stock-basket.com and although it is still largely unfinished I have a very annoying problem at this early stage!

I wanted the featured box on the frontpage to only have 2 items and to be aligned on the right of the define_main_page etc. I have managed this changing the default ordering for the frontpage items in tpl_index_default.php so that it now goes: Featured Products > Define_Main_Page > New products and then added this to the stylesheet:

#featuredProducts {
float:right;
width:25em;



}

.centerBoxContentsNew img {
border: 1px solid #000;
}

.centerBoxContentsFeatured img {
margin: 2em 0;
padding:1% 2% 0 2%;

}

This has floated the featured products box to the right of the main_page text but the images are horribly aligned and overlap - any ideas please?


Thanks

[kuroi]

I suspect that you've told the featured products box to display 4 across, so its only allocating 25% of the 25em width to each image. That's not enough, so they overlap ... except in IE6 which isn't clever enough to find that solution to the "too little space" space. It can't display your png product images properly either, and gives them an ucky blue background.

[twdhosting]

Nope - I've just double checked and the featured box is set to display 2 products...????

I wasn't aware of the IE6 / PNG problem, eventually I want to add a dark grey background image "under" the main page content so that it shows through the images transparacy... But that's my next problem :)

[kuroi]

Nope - I've just double checked and the featured box is set to display 2 products...????

I take it that's the admin setting. Default Zen Cart divides this figure into 100% to get them width of each product box. You template however, is coming up with 25% instead of 50% which makes me wonder whether your template's author has hard-coded the 25%. In which case you would need to find where and fix it.

I wasn't aware of the IE6 / PNG problem, eventually I want to add a dark grey background image "under" the main page content so that it shows through the images transparacy... But that's my next problem :)

Just bear in mind that there is no transparency for png files if your visitors are using IE6, and that the flashier the design that assumes it, usually the worse it looks for this diminishing but still significant audience.

[twdhosting]

Thanks Kuroi - and your a genius... :)

Well actually the 4 columns were not hard coded but it got me to looking harder at the zen admin settings - and I had missed one: "Featured Products Columns per Row" - I had altered the setting under "maximum values" for the featured products box but this one was hidden under "Index Listing".

As for the IE6 issue... I'm not sure what to do!