10px added to width in image captions?

I second that ??

I’m currently subtracting 10px in the caption tag, but that also feels just like a weird workaround.

width: auto;

So where would you put “width: auto;”?

The thing is that the new caption feature writes something like that:

[caption id="attachment_XY" align="alignright" width="100" caption="This is a caption"]<img src="example.com/image.jpg" alt="This is a caption" title="XYZ" width="100" height="100" class="size-full wp-image-XY" />[/caption]

Note that the first width (that goes into the div in the output) is the same as the width of the image in the editor. But as soon as you post it, 10px are automatically added to the width of the div (so in the example above, the div would be 110px wide, although the image is only 100px).

the forum is more for a helping hand, not really to teach you everything. It is great you want to to run your own site, but this will involve you learning basic code, esspecially CSS. Lot of sites out that explaining with tutorials and examples CSS. CSS is universal and not just WP.

I don’t get you. I do think this is a WP specific topic, not a general CSS thing. Did you read my last posting?

So where would you put “width: auto;”?

This is your answer. If you understand CSS you know where to put it. If you don’t know CSS you could badly screw things up. Read about the basics of CSS and you have your problem sorted.

Ok, but I still don’t understand why WP adds these 10px.

Because the caption box surrounds the whole image, like the edge on a polaroid picture. It’s got 5 px of gray on each side. Look at the default theme, for example.

The caption shortcode itself does this. No fix other than replacing the shortcode with a plugin or hacking the core code. Look at the function img_caption_shortcode in the media.php file.

Ok, that explains it perfectly! Thanks a lot.

@greyisgood: width: auto!important; for .wp-caption worked for me. Sorry for bothering.

Setting width:auto; (or no width) on the caption div would make it as wide as the content when the caption is centered, so the frame won’t “stick” around the image.

Actually, setting width: auto; for floated elements is not valid CSS2, see:

https://www.w3.org/TR/CSS2/visuren.html#floats

(CSS 2.1 changes this to allow auto on floats, but it is still only a candidate recommendation. It would use “shrink to fit” width in this case.)

So, while setting width: auto; may appear to work in your browser, it is actually incorrect and not cross-browser safe.

So, WordPress is doing the right thing by hardcoding a width — but it is doing something supremely annoying by randomly adding 10px instead of just leaving the width alone! To me this “feature” is a bug that WordPress should rectify or at least make configurable.

There is a WP file you can easily hack if you want to remove this behavior. See this bug report for more info:

https://www.ads-software.com/support/topic/218542

instead of hacking the core, a simple plugin should do the trick. try this for size. install in the normal way.

<?php
/**
 * @package FixImageMargins
 * @author Justin Adie
 * @version 0.1.0
 */
/*
Plugin Name: FixImageMargins
Plugin URI: #
Description: removes the silly 10px margin from the new caption based images
Author: Justin Adie
Version: 0.1.0
Author URI: https://rathercurious.net
*/
class fixImageMargins{
    public $xs = 0; //change this to change the amount of extra spacing

    public function __construct(){
        add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
    }
    public function fixme($x=null, $attr, $content){

        extract(shortcode_atts(array(
                'id'    => '',
                'align'    => 'alignnone',
                'width'    => '',
                'caption' => ''
            ), $attr));

        if ( 1 > (int) $width || empty($caption) ) {
            return $content;
        }

        if ( $id ) $id = 'id="' . $id . '" ';

    return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . ((int) $width + $this->xs) . 'px">'
    . $content . '<p class="wp-caption-text">' . $caption . '</p></div>';
    }
}
$fixImageMargins = new fixImageMargins();

?>

Hey! I tried you plugin which worked successfully on a localhost, but when I put it online, it says:

Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /myweb/fiximagemargins.php on line 16

Any ideas? Thanks a lot for this code, I hope they will fix this in the next version ??

Any ideas at all?

Worked for me on dreamhost.