Spacing out text from image

Hi, my website is: https://www.LFSwear.com

If you look over on the left side, and click the category "T-Shirts" you see alot of products.

What I'm trying to do is space out the product image from the text. Can anyone help me out? :cool:

Add this to the bottom of your templates stylesheet.css file and adjust to suit

.listingProductImage {
        margin: 0em 0em 1em 0em;
        }

Did not work. :huh:

It has to if you are adding it to the correct stylesheet

I guess it was my cache. I just checked and it's changed now. :D

Thanks so much kobra! :smartalec:

Not sure how I didnt notice this before, but the shadow image is spaced out from the actual main image. Weird... :blink: can you help fix it?

You might try attaching it to

.listingProductImage

You mean attach it to that CSS rule you gave me from the beginning?

Yes, move it from where you have it to the bottom of the image container div
Then if too close add padding the bottom

I'm completely lost. Can you walk me through this?
I thought you meant add it to the stylesheet file.

Guess I am lost also

You have this image in your stylesheet shadow.png

.centerBoxContentsProducts {
		background:url("../images/shadow.png");
        background-repeat:no-repeat;
        background-position:center;
		padding-bottom: 3px;
		}

But it appears that you have it applied somewhere in the code and maybe that is also applied in the code

So if you determine where this is that shadow.png is besides the stylesheet then remove it and add that image as a background to .listingProductImage
Remove it from .centerBoxContentsProducts

And then if too close add padding-bottom to .listingProductImage

Well, I added the shadow image in the php for the pages: New Products, All Products, and the product info page... However, I could not figure out how to add it to the category page so I tried adding it in the CSS. Looks like it worked, but now I'm having these spacing issues.

And I sort of found a fix. If I change the line height in the CSS to 13.3 then it takes out the space, but it does squeeze everything a little bit, and I don't want to do that.

If you do
background: url("../images/shadow.png") no-repeat scroll 50% 45% transparent;

It works on most of your images, specially the ones with grey background, but goes a bit high on the other images, you may want to consider changing your images to be all the same, and use the % for your shadow positioning.

You could try putting the background on your .listingProductImage with some left, and right padding.

Or you could try this on your .listingProductImage
www dot css3.info/preview/box-shadow

They all will be the same... Our company is currently in the process of taking model photos which will all be the same size.

Here's an example image: Click here to view