Product Listing--spacing between

ok if you go to http://luvnbubbles.com/shop/index.php?main_page=index&cPath=1_15

it should bring up the catagory bubble bath listing the products is their a way to make the spacing in between each one a bit bigger. if your not sure what i mean if you look at the Bubbles of love 1oz first one listed and the one below it their is no spacing in between and makes the pics looks like they are overlapping

any help would be great

maggie

You can add spacing in the stylesheet. Add this code and tweak to your heart's content:

/* space & border between listing items */
.productListing-odd td, .productListing-even td {
	vertical-align: top;
	padding: 0.5em;
	margin-bottom: 1em;
	border-bottom: 3px double #aaccbb;
	}

The padding also controls clearance between elements of each product, and you can set that separately by adding another value:
padding: 0.5em 1em;
The first value is top & bottom, the second is left & right.

THANK YOU!!!!!!!

I have been searching for days on how to fix this problem! Thanks

My preview images are overlapping and I tried the code that was pasted here but it's not working for me. Any suggestions?

Example

You are looking at the additional images, which are controlled by completely different selectors.
#productAdditionalImages is the whole block of images;
.additionalImage covers each individual image.

In my 800x600 monitor, they overlap by 50px or so and the right one spills over the sidebox. Maybe your images are too big to fit in the probably 33% width the code is specifying? Have you tried two images per row?

I have no idea how to only have 2 images per row. I tried to do that in the stylesheet but nothing is working. I thought I finally had the hang of everything but now it seems like spacing is my problem. Not just with the additional images but also on another page. I can't even get to seperate paragraphs. I made seperate paragraphs in ez-pages but when I view it on my site the spaces disappear. I have no idea why...

Like on this page there was supposed to be the first 2 banners then I hit enter twice so there would be an empty line before the text but that disappeared too.

example

Fixed it...there's a setting in admin to decide how many images per row. Thank you for the help!

Glenn,

That is a great ix! It is not only effective, but it has class as well. Thank you for posting this fix. You done real good.

John Underwood, jund

This fix has worked great for me also. thanks guys :clap:

I've been trying to fix this strange issue in IE for hours. If you click on the page below, if you are in firefox everything looks fine. Product image and Product price + Product Name all are flushed left.
But if you view in IE, Product Name is centered in the row which is very distant from the image on the left. I tried to give this "td" a new class name ".main1" and set it's margin-left: -50px; and tried other sorts of things nothing worked. I need urgent help please. Thanks
http://www.blossomberry.net/index.php?main_page=products_all

Your source shows the productlisting-odd and -even <td> as having a width of 110, which is pushing the other image over that far in IE. I'm not sure where it's coming from, but it may have to do with how many columns you've specified, if you have the Column Grid mod installed.

gabenn2:

THANK YOU!!!!!!!

I have been searching for days on how to fix this problem! Thanks

I would like to say thank you too, been looking for the answer :smile: