Support » Fixing WordPress » WP forcing a style tag 10px bigger than image

  • Resolved demonboy

    (@demonboy)


    Working on 2.7 and loving it! However I’ve an issue that I also had with 2.6 and it’s regarding images. Yes, I’ve searched the forum AND checked my style sheets so if anyone out there can help me I’d be really grateful.

    You can see what I’m dealing with at the moment by going here:

    http://www.followtheboat.com/index.php/2002/05/11/a-new-post/

    You can see that both my left aligned and right-aligned images have an extra 10px added to the right, or, rather, the container is 10px bigger and the image is forced top-left. When I look at the code I can see that the image style is set to 210px when the image itself is 200px. Here is the CSS for all my images, starting with the code for the align left and align right images that are affected:

    .wp-caption.alignright {background-color: #443713;  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #FFFFFF; margin-left:15px; border: thin solid #443713;}
    .wp-caption.alignleft  {background-color: #443713;  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #FFFFFF;	margin-right:15px; border: thin solid #443713;}
    /* CURRENT IMAGE*/
    img.alignright {float:right;margin:0 0 1em 1em;	border: thin solid #443713;margin:5px;}
    img.alignleft {float:left;margin:0 1em 1em 0;border: medium solid #443713; margin:5px;}
    img.aligncenter {display: block;margin-left: auto;margin-right: auto;border: thin solid #443713;margin:5px;}
    a img.alignright {float:right; margin:0 0 1em 1em}
    a img.alignleft {float:left; margin:0 1em 1em 0; border: medium solid #6d5820;}
    a img.aligncenter {display: block; margin-left: auto; margin-right: auto;border: medium solid #6d5820;}
    /*THUMBNAIL IMAGE*/
    .imgtfe {border: medium solid #443713;}
    /* OTHER IMAGES*/
    .ranimagecontainer {width:600px; float:left; text-align:center;border: thin double #6d5821; background-color:#443713;}
    .ranimage {position: relative; background: url(images/rlogimage.gif) no-repeat left bottom; z-index:5; background-repeat no-repeat; height:60px;}
    .picleft{background-color: #453713;border: thin solid #7c6426;padding: 5px;margin-right:15px;}
    img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
    img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; border: medium solid #FF0000;}

    If anyone could help I’d be really grateful as this is the last major annoyance I have to deal with before I started migrating my webiste.

    Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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.

    Thread Starter demonboy

    (@demonboy)

    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.

    Thread Starter demonboy

    (@demonboy)

    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.

    Thread Starter demonboy

    (@demonboy)

    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: http://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 http://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 😀

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘WP forcing a style tag 10px bigger than image’ is closed to new replies.