offsetting the text from the images

I don't like how close the text captions (names) appear under my products pictures... can you help tell me where in my code and what do I put to make this show slightly further apart?

http://cart.nellifant.com/

here is an example...

For the page you referenced try this and adjust as required: First see if you have this in the css and seperate if necessary and if not just add it:

img {
padding-bottom: 2em;
}

thanks for your help... I can't find this in my styleshhet so far... so where do I add it in to make my product listings and prodect information have more paddding???

There is a section of your stylesheet labeled /Image Display/ ...

#productListing a img {
margin-bottom: 1em;/or whatever you want/
}
#productMainImage img {
margin: 1em 0em 1em 0em ;
}

#productAdditionalImages img {
margin: 1em 0em 1em 0em ;
}

this is now what that section of my stylesheet looks like... yet however nothing seems to be changing at all..

I don't know whats up.

I am stumped. This is the stylesheet.css that is housed in my includes isn't it???

what is up????

Or am I just a big dunce?

/Image Display/

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 6em 1em 1em 6em ;

}

#productListing a img {
margin-bottom: 4em;/or whatever you want/
}
#productMainImage img {
margin: 6em 0em 1em 6em ;
}

#productAdditionalImages img {
margin: 6em 0em 1em 6em ;
}

Make sure that you are editing this file includes/templates/classic/css/stylesheet.css

And as I first posted find seperate or just add this:

img {
padding-bottom: 2em;
}

I did this on the page you posted using FF & the web dev tools and it works

ok I was working on the wrong Css stylesheet so now I am on the correct one.

I now have this:

/Image Display/

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 1em 1em 1em 1em ;

}

#productListing a img {
margin-bottom: 1em;/or whatever you want/
}
#productMainImage img {
margin: 1em 1em 1em 1em ;
}

#productAdditionalImages img {
margin: 1em 1em 1em 1em ;

and I need a bit more info so I can get it right...

ie: is this top/left/right/bottom???1em 1em 1em 1em ;

ot what order?

Currently in my product desriptions the heading is sitting higher than the image.

The caption here is now OK but in the column view ( and small examples below it new products) the captions are still sitting too close to the images)

the small amount of code you suggested I add... I can't find any reference to in my sheet so I don't know where to make the correction? or add it?

sorry I am quite new to all this

img {
padding-bottom: 2em;
}
will affect all images on your site which do not have specific instructions. If that is ok, just add this to your stylesheet, all by itself near the top. I think 1em looks a bit better than 2em, but that's your call. So far you appear to have no images on your site that are not captioned product images, so this may work just fine.

The four-part spec goes top-right-bottom-left (clockwise).

Glen,

Using FF & the WDT, I used your code and there was no spacing??

I think that margin here should be padding??

Margin is what I use (successfully) on my site... though only for the info page images I think.

margin gives space outside a border while padding gives space inside. It's hard to see any difference in how the two effect text in a div if there is no border around the div.
http://www.redmelon.net/tstme/box_model/ is a good look at the differences.