WP forcing a style tag 10px bigger than image

My advice: install ASAP Firebug Extension for Firefox. It will allow you to easily check any html / css issues you have. I used it to check your site and found the following:

1. The div’s width is set inline in your html (style=”width: 210px;”)
2. The “background-color” is defined under .wp-caption.alignright class at line 110 of your css stylesheet. Delete it.
3. The same goes for your font color (“color” property). Delete it.

BACK-UP your stylesheet before doing any modifications, just in case.

Thanks for the heads up on the extension but this doesn’t make sense. If I delete the background colour and the font colour then I end up with the default white background and black text. I don’t want that – I want what I have defined in the .wp-caption.alignright class, brown background and white text.

Also I know that the style is setting the width to be 210px and this is the crux of the problem, but where is it doing that? It’s not something that is defined in my style sheet.

I posted this problem on another forum and found a willing programmer who came up with a solution. It does require a change in the core code so if you’re not comfortable with this, don’t do it, but it is pretty simple:

wp-includes/media.php – line 580 – change the value ’10 to ‘0’, so the line reads:

return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . (0 + (int) $width) . 'px">'

The guy even wrote a plug-in for me though it doesn’t work at the moment. If he comes up with a working one I’ll post it up here.

OK, I said I’d post up the plug in that Justin designed for me to solve this problem. Save this with a unique name in your plug-ins dir as a .php file and activate in the usual 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();

?>

A simple workaround I used in my theme https://cordobo.com/green-park-2/ is to overwrite the inline-styles added by wordpress:

.entry div.wp-caption {
     width: auto !important;
     <em>the rest of your styles</em>

This works in all the newer browsers and you don’t have to touch the core-code of WP

???Thanks Cordobo!!! works perfect ??