styling product listing pages with column layout grid

[gee38l]

I also have an issue with firefox where if there are less than 3 products in a category the images move to the left please see attached pic. Anyone know what the problem could be it seems fine in internet explorer 6 and 7.

[gjh42]

Adding these two rules to your stylesheet will get the spacing you are looking for. Adjust the numbers to taste.

.centerBoxContentsNew img {margin: 1.0em 0;}

.centerBoxContentsNew .smalltext1 {
    line-height: 2.0em;
    position: relative;
    top: 0.4em;
    }

[gjh42]

Change

.listingimg{
	text-align:center;
	margin-top:10px;
}

to

.listingimg{
	text-align:center;
	margin:10px auto 0;
}

[gee38l]

Adding these two rules to your stylesheet will get the spacing you are looking for. Adjust the numbers to taste.

.centerBoxContentsNew img {margin: 1.0em 0;}

.centerBoxContentsNew .smalltext1 {
    line-height: 2.0em;
    position: relative;
    top: 0.4em;
    }

Hey Glen, this worked perfectly thank you very much!

[gee38l]

Change

.listingimg{
	text-align:center;
	margin-top:10px;
}

to

.listingimg{
	text-align:center;
	margin:10px auto 0;
}

Glen, This change didnt really do anything but move the listing up and the pic stayed to the left......

Any other ideas?

[gjh42]

It worked when I tested it on your site. I don't know what else to say, except to be sure you change in the right place.

What browser are you using? Maybe IE doesn't handle the CSS right...

[gee38l]

It worked when I tested it on your site. I don't know what else to say, except to be sure you change in the right place.

What browser are you using? Maybe IE doesn't handle the CSS right...

Ok i didnt completely do what u said i didnt remove top from margin and now its working....

Thanks Glen

[gee38l]

Glen, do you know why the bottom gap btween new products and footer are different in ie and ff?
Posted via Mobile Device

[gjh42]

I have found and fixed the bug that was preventing the "rows" setting and the CSS-only alternative from working. It was very simple, and anyone who has downloaded the second version of the mod can fix it by finding this section around line 86 in /includes/modules/your_template/product_listing.php (flex version; CSS-only version will have different line numbers):

    case 'PRODUCT_LIST_PRICE':
    if ($skip_price) {
      $flex_skip_now = 1;
      $flex_skips++;
    } else {
    $lc_text = TABLE_HEADING_PRICE;
    $lc_class = 'listingPrice' . (PRODUCTS_LIST_PRICE_WIDTH > 0 ? '" width="' . PRODUCTS_LIST_PRICE_WIDTH : '');
    $zc_col_count_description++;
    break; 

and change it to this:

    case 'PRODUCT_LIST_PRICE':
    if ($skip_price) {
      $flex_skip_now = 1;
      $flex_skips++;
    } else {
    $lc_text = TABLE_HEADING_PRICE;
    $lc_class = 'listingPrice';
    $lc_align = (PRODUCTS_LIST_PRICE_WIDTH > 0 ? '" width="' . PRODUCTS_LIST_PRICE_WIDTH : '');
    //$zc_col_count_description++;
    }// skip
    break; 

You will also need to find this around line 52:

$lc_align = '';//align settings moved to stylesheet
for ($col=0, $n=sizeof($column_list); $col<$n; $col++) { 

and switch the statements like this:

for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
$lc_align = '';//align settings moved to stylesheet 

I haven't tested this, but the way it was would definitely break the output in the way observed, and this fixes that problem.

However, I have also come up with a superior method of performing the "flexible listing" functions which will be much easier to use, so I have withdrawn the download until I finish the new version. It will require no user code changes at all, merely setting the sort order of the elements in admin in a certain way.

[gjh42]

Per request, I am posting a preliminary copy of Flexible Product Listing v1.0. It is fully functional, but still needs more readme text and files cleaned up before final release.