WordPress › Support » wp-caption - How to set the right and left padding for captions

jeeremie
Member
Posted 9 months ago #
I am trying to style my caption to have a 3px padding on the left, right and top. Here's my code:
```
.wp-caption{ padding-top: 3px;text-align:center; background-color: #EFEFED; border: 1px solid #D0D0CE; margin-top: 15px; margin-bottom: 15px; }

.wp-caption img{ margin:0 auto; padding: 0; border: 0 none; }

.wp-caption-text{ margin: 0; padding: 4px 0; color: #676F51; font-size: 0.85em; }
```
If I write 'padding-top: 3px;', by default it sets 5px for padding-right and padding-left.

And 'padding: 3px 3px 0 3px;' doesn't behave as it should. Top padding is 3 px as we would expect but right and left border are 8px (5px (default padding) + 3px)!!!

Is there any way to set the left and right padding to be exactly 3px??

This default 5px padding 'pushes' my right sidebar in IE because my images width is exceeding the post width. I could resize all my images, but I don't want this! I have too many images on my blog.

Hope someone can help me.
chaoskaizer
Member
Posted 9 months ago #
Is there any way to set the left and right padding to be exactly 3px??

try
```
.wp-caption,
.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.aligncenter,
.wp-caption.alignnone{
   padding: 3px 3px 0pt !important
}
```
note: if your image size is 500px WP will add extra 10px to wp-caption div.

This default 5px padding 'pushes' my right sidebar in IE because my images width is exceeding the post width. I could resize all my images, but I don't want this! I have too many images on my blog.

set your post content to a fixed width with overflow set to hidden, example ↓ (you'll need to change the ".entry-content" with your post classname and adjust the size accordingly).
```
.entry-content{ width:542px; overflow:hidden}
```
t31os
Member
Posted 9 months ago #

If you use overflow:hidden you could be chopping off part of the image you want displayed....

You could just resize the images as you post by setting the width on the image tag...

<img src="yourimage" width="SET_THE_WIDTH_HERE">

Of course you could always use max-width:WIDTH , but that's not going to work for everyone..

Just some alternate suggestions to put out there, not suggesting that the above advice is bad in any way....
jeeremie
Member
Posted 9 months ago #
try
```
.wp-caption,
.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.aligncenter,
.wp-caption.alignnone{
   padding: 3px 3px 0pt !important
}
```
Thanks Chaoskaiser but it does not work. padding-left and padding-right take a value of 8px. Is there no way to control that wp-caption div the way we want? So weird!

<img src="yourimage" width="SET_THE_WIDTH_HERE">

I know this trick t31os but as I said I have too many images on my blog and I can't just edit each posts one by one. Overflow worked for me but I just wish I could edit the wp-caption padding as I want.
chaoskaizer
Member
Posted 9 months ago #

something must have overwrite the previous styles? do u have any links?
jeeremie
Member
Posted 9 months ago #

Yes, you can see an image caption at http://web-kreation.com/demos/oneroom/index.php/animals/oneroom-free-wordpress-theme-by-web-kreation/
jeeremie
Member
Posted 9 months ago #

Css is here: http://web-kreation.com/demos/oneroom/wp-content/themes/OneRoom/style.css
t31os
Member
Posted 9 months ago #

EDIT** See my reply below...
t31os
Member
Posted 9 months ago #
If i over-ride the CSS on the page, set padding to 0, and increase the image size, it fills the box (don't worry about how i do that).

The image on that page is not large enough to fill the wp-caption DIV if no padding is applied....

Padding is working as expected....

The wp-caption DIV is rendered at 480px, and the image is 470px... so it would appear like you have padding, which is not the case, it's just the DIV is larger then the image and the image is being centered.

You're CSS says the following..
```
/* Image Captions */
.wp-caption{background-color:#EFEFED;border:1px solid #D0D0CE;margin-bottom:15px;margin-top:15px;padding-top:5px;text-align:center}
```
No padding for left or right...

Padding does work if you set it like so....
```
/* Image Captions */
.wp-caption{background-color:#EFEFED;border:1px solid #D0D0CE;margin-bottom:15px;margin-top:15px;padding:3px;text-align:center}
```
Off-topic: I'm liking your theme there, nice design....i'd like to use it myself, but i'm not a fan of having names in the footer. Would there be an issue if i removed it?
jeeremie
Member
Posted 9 months ago #

t31os, please contact me at info ^at^ web-kreation ^dot^ com if you want to remove the link in the footer. Thanks
jeeremie
Member
Posted 9 months ago #
By the way, I forgot to answer you.

I had tried "padding:3px" before posting here and it didn't work. Something in my code must be overriding wp-caption but what?

Here's the code for the img caption:
```
[caption id="attachment_138" align="aligncenter" width="470" caption="Lorem ipsum dolor sit amet"]<img src="http://web-kreation.com/demos/oneroom/wp-content/uploads/2009/02/nature-1.jpg" alt="Lorem ipsum dolor sit amet" title="nature-1" width="470" height="180" class="size-full wp-image-138" />[/caption]
```
If I set the CSS like so:
.wp-caption{background-color:#EFEFED;border:1px solid #D0D0CE;margin-bottom:15px;margin-top:15px;padding:0px;text-align:center}

... it gives me this: "padding-top:0px; padding-left:5px; padding-right:5px;"
t31os
Member
Posted 9 months ago #

Re-read what i posted above, it does work, i've tested in on your page using Stylish (firefox addon), and i can over-ride your CSS with my own...

Applying 3px works as it should....

However as i pointed out before, the image does not fill the space, and therefore the image appears to have extra padding that it doesn't have...

Read my last post carefully, as i did try to cover it all already...

If applying my suggested change did not work try adding !important to the CSS definition.

Failing that i think you're just misunderstanding what i'm trying to explain, or may i'm misunderstanding, but i can tell you it does work for me when i apply the aforementioned changes.

---- off topic ----
Regarding the footer, why would i need to email you? I can make the mods myself, i'm just asking if it will be an issue? A simple yes or no will suffice.... lol... i'm prepared to give credit, i just don't feel justified in giving it on every single page of my site, such would be the case since the footer is on every page.
jeeremie
Member
Posted 9 months ago #

Thanks, I understand perfectly what you said and I am telling you padding:3px !important; is not working. I have been coding with HTML/CSS for about 3 years. I am not a complete idiot! :-(

I have also tried the Stylish plugin and doesn't work either.

The wp-caption DIV is rendered at 480px, and the image is 470px... so it would appear like you have padding, which is not the case, it's just the DIV is larger then the image and the image is being centered.

If you look at the code below, both caption width and image width are set to 470px so the wp-caption DIV is not supposed to be rendered at 480px! That's why I think something in my CSS must be overriding my settings.

[caption id="attachment_138" align="aligncenter" width="470" caption="Lorem ipsum dolor sit amet"]<img src="http://web-kreation.com/demos/oneroom/wp-content/uploads/2009/02/nature-1.jpg" alt="Lorem ipsum dolor sit amet" title="nature-1" width="470" height="180" class="size-full wp-image-138" />[/caption]

Of course, I could fill the space as you suggest and it would work:
[caption id="attachment_138" align="aligncenter" width="460" caption="Lorem ipsum dolor sit amet"]<img src="http://web-kreation.com/demos/oneroom/wp-content/uploads/2009/02/nature-1.jpg" alt="Lorem ipsum dolor sit amet" title="nature-1" width="470" height="180" class="size-full wp-image-138" />[/caption]

But as I told you at the beginning, I don't want to edit the html or my images.

Regarding your off-topic, as you said it is "off topic" and I have reasons not to talk about it on this forum.
t31os
Member
Posted 9 months ago #
Stylish was just for testing, i wasn't suggesting it as a solution....

The wp-caption class doesn't have width set, so i think it'll default to auto, which will extend as far as it can... which happens to be 10px more then the image width...

To prove the point though, open Stylish, click Write, plonk this into the new style, and click Preview, and check your page...
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://web-kreation.com/demos/oneroom/") {

.wp-caption {padding:0!important;margin:0!important;width:300px!important}
.wp-caption img {padding:0!important;width:300px!important}

}
```
You'll see there is no gap around the image...

If you set wp-caption to width:auto it will extend out further then the the image.

Or try this in Stylish...
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://web-kreation.com/demos/oneroom/") {

.wp-caption {padding:0!important;margin:0!important;width:100%!important}
.wp-caption img {padding:0!important;width:100%!important;height:auto!important}

}
```
And you'll see the image fills the box....

It's just the image size combined with the DIVs width.... again it's not a padding issue. The image and div are just different sizes....

Unless you set the wp-caption to a set width, which you havn't then that's gonna happen..

However doing this, ignoring the above....
.wp-caption img {width:100%!important;height:auto!important}

Will show you that it is not padding at the sides, since the image will now fill the DIV... apart from the top, because you have padding-top already.... ;-)
jeeremie
Member
Posted 9 months ago #

Yes, .wp-caption img {width:100%!important;height:auto!important} is working. Thanks. What's weird is that my caption renders at 480px and not 470px!! I am still wondering why.

Anyway, thanks. This partially solve my problem.
lithy
Member
Posted 3 months ago #

hopefully, you already found this thread describing how to fix this bug:

http://wordpress.org/support/topic/218542

In the PHP code for adding the caption div, there is an extra 10px that is added to the width of the image. All you have to do is go to the media.php file located in the wp-includes folder and change this value. In WP version 2.8.2, it is on line 596:

style="width: ' . (10 + (int) $width) . 'px"

change the 10 to 0.

Reply

You must log in to post.

WordPress.org

Forums

[resolved] wp-caption - How to set the right and left padding for captions (16 posts)

Reply

About this Topic

Tags

Code is Poetry