I'm having a weird issue with styling, and I'm at a loss with how to fix it. I've been revamping my personal site lately with Atahualpa (which I've used to build three sites now, awesome theme), and I'm stuck on a problem with captioned images. When I give an image a caption, it adds about 5px on either side of the image with the background color of the caption, as if the div is to wide for the image. I've been over it dozens of times in Firebug, but I can't seem to figure out the culprit. I put up a test post showing my problem here. I changed the background color to red to highlight the problem:

http://www.androsko.com/post/test-post-2

The problem is not present on captionless images like this one:

http://www.androsko.com/post/test-post-1

What I'd like is to get rid of the padding on the left and right of the image so that the caption box is also the same width as the image above it. Everything else is the way I want it except that, and I have no idea where it's coming from. The only thing I found was an element.style that was setting the width to 210px (the image in test post 2 is 200px wide), but I'm not sure how to work around that. Any help would be much appreciated, as I'd love to use captions but I hate that padding.

My specs:
Wordpress 2.9.2
Atahualpa 3.4.6 (I've been having this issue at least since 3.4.4)

In "ATO>Style IMAGES>Images in Posts: Caption Style" make sure there is a

padding-top: 4px;

It should be there by default. I was able to get your caption border to work with the following in Firebug so I should work in CSS Inserts

.wp-caption {padding-top:4px;}

Hi Larry,

Thanks for the reply. Unfortunately, what I'm trying to do is get rid of the padding entirely. Adding 4px on the top evens out the top with the rest of the border, but I don't want to have any border at all. I'd like to have similar padding as my regular images in Test Post 1, just with the caption underneath. So far everything I try leaves that padding on the left and right. I must be missing something obvious, but I can't figure out what's causing that left and right padding to appear. Otherwise I'd fix it with an insert.

So briefly what I'm looking for is a captioned image that has no padding around the image and uses the same margin styles as my non-captioned images, so the red currently on the left and right would be gone and the red underneath would be the same width as the image.

Thanks,
Androsko

You could try this

.wp-caption {width:200px !important;}

That worked well for the one image that is 200px wide, but I'm looking for something that will work for all images with captions regardless of width. It did give me an idea though, and after poking around with various solutions, I'm about 90% there:

.wp-caption 
{
width:auto !important;
height:auto !important;
}

I've tested that insert as working in IE8, Firefox and Chrome. I'm worried that it won't work in IE6 with the !important declarations, but that'll be another day's work. As I suspected the DIV is the problem. Something is adding 5px on the left and right, but I can't tell what. This insert sets the DIV width and height to auto, essentially wrapping itself to the image inside as you can see:

http://www.androsko.com/post/test-post-2

The big problem with this solution is that it messes up the line breaks for the caption text. There is nothing giving the <p> any width style, so it keeps going beyond the image as you can see here:

http://www.androsko.com/post/test-post-3

I tried adding inserts for auto and inherit width to the "div.wp-caption p" with no luck. I can insert manual breaks with <br />, but that's not a very elegant solution. Anyone have thoughts on setting the width for the caption text relative to the image width in the DIV?

So that mostly takes care of the problem, but... What on earth is adding that 5px on the left and right!?! Seriously, I can't find what's causing it. If I could, I would get rid of it and that would be the end of the problem.