Column Divider Lite

[jettrue]

Yea, its more of a browser specific thing, but technically you are correct. I did have people running into the padding thing with horizontal lines as well. Your method will work for people with 2 or 3 columns but it can get hairy when adding more.

I will see what else can be done but your method is probably practical if I add the replace for up to 6 columns.


Thanks

I saw the issue on Firefox and IE6. Didn't check IE7.

The other thing to do, is to make a change in the module files for the all the different product listings. For example, in modules/new_products.php, you can change:

    $col_width = floor(100/$num_products_count);
  } else {
    $col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS);
  }

to

    $col_width = floor(100/$num_products_count) -.5;
  } else {
    $col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS)-.5;
  }

So that 50% becomes 49.5%, 33% becomes 32.5%, etc. I actually normally do the above on all zen cart installs, as I like to be able to add some padding between the columns. But I'm designing a new template, and want to change as few files as possible.

I found that adding left and right padding to .vDotLine works in Firefox, but not in IE, and it seems that either the option in this post, or the one above, is the best for cross browser issues.

[qhome]

I saw the issue on Firefox and IE6. Didn't check IE7.

The other thing to do, is to make a change in the module files for the all the different product listings. For example, in modules/new_products.php, you can change:

    $col_width = floor(100/$num_products_count);
  } else {
    $col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS);
  }

to

    $col_width = floor(100/$num_products_count) -.5;
  } else {
    $col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS)-.5;
  }

So that 50% becomes 49.5%, 33% becomes 32.5%, etc. I actually normally do the above on all zen cart installs, as I like to be able to add some padding between the columns. But I'm designing a new template, and want to change as few files as possible.

I found that adding left and right padding to .vDotLine works in Firefox, but not in IE, and it seems that either the option in this post, or the one above, is the best for cross browser issues.

Isn't there some sort of height: 1px hack for IE or something. I can't stay current with all the hacks

[awhfy99]

I was wondering if I might be doing something wrong or is it not meant to include the category view? It works fairly fine on the new products, etc., just not centered, but when I view a category (I use the column option to display my products), the dividers are not there. I do notice that there is no cell padding, even when I do a display by row, the images are crunched together. To make sure it wasn't the IH, I am importing some of the images from my live site.

[awhfy99]

I was wondering if I might be doing something wrong or is it not meant to include the category view? It works fairly fine on the new products, etc., just not centered, but when I view a category (I use the column option to display my products), the dividers are not there. I do notice that there is no cell padding, even when I do a display by row, the images are crunched together. To make sure it wasn't the IH, I am importing some of the images from my live site.

I did find a resolution for the padding and line separation of products when the row option is selected. I added

.productListing-data {
padding: 0.5em;
border-bottom: 4px solid #000000;
}

in the stylesheet.css, but this does nothing when the column option is applied.