Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Possible Duplicate:
Caption in Page adding unwanted 10px to width

This is a screen capture from a post. I have given .wp-caption a black background so the extra 10px margin on the right can be seen. The 10px margin on the top is purposeful. I don't know what is causing the 10px margin on the right and there is nothing else I can find in my code that would create it... I've even eliminated everything in my CSS to rid it of this margin but it still remains.

One solution is to set the image width to 100%, but this adds an adittional 10 pixels to my assigned image size in my posts and therefore makes the image distorted horizontally by 10 pixels. This problem is only happening with captions, not general images.

You can see the problem here: http://themeforward.com/demo2/sample-elements/

http://imageshack.us/photo/my-images/217/prob1c.jpg/

/*//////////////////////////////////////////////////////////////////// 
//  30. Images
////////////////////////////////////////////////////////////////////*/
img {
    border:0;
    overflow:hidden;
    z-index:5!important
}
#post_content img, p img {
    height:auto;
    z-index:5!important;
    max-width:650px;
    margin-top:9px!important
}
#content img {
    display:block;
    clear:both;
    max-width:100%!important
}

/* Images - Aligning */
.aligncenter {
    clear:both;
    display:block;
    margin:0 auto 10px
}
.alignleft {
    display:block;
    float:left;
    margin:0 25px 10px 0
}
.alignright {
    display:block;
    float:right;
    margin:0 0 10px 25px
}

/*//////////////////////////////////////////////////////////////////// 
//  31. Image captions
////////////////////////////////////////////////////////////////////*/
.wp-caption img {
    border:none;
height:auto;
    background:#F5F5F5;
    max-width:650px!important
    }
.wp-caption p.wp-caption-text {
    font-size:85%;
    padding:0!important;
    margin:2px 0 5px!important;
    line-height:175%!important;
    font-style:italic;
    text-align:left
}
.wp-caption { background:#000 }

/* Image Captions */
.alignleft.wp-caption { margin:0 25px 10px 0 }
.alignright.wp-caption { margin:9px 0 10px 25px }
.aligncenter.wp-caption { }
share|improve this question
    
can you share your site link? –  booota Dec 18 '11 at 1:57
    
    
The image shortcode adds a +10 inline width value to the caption div, see here. It's that inline width setting on the div that is the source of your issue. –  t31os Dec 18 '11 at 12:57
add comment

marked as duplicate by toscho Aug 30 '12 at 13:04

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

3 Answers

up vote 0 down vote accepted

Here's the answer, in functions.php

function wpse14305_img_caption( $empty_string, $attributes, $content ){
  extract(shortcode_atts(array(
    'id' => '',
    'align' => 'alignnone',
    'width' => '',
    'caption' => ''
  ), $attributes));
  if ( empty($caption) )
    return $content;
  if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
  return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '">' . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

add_filter( 'img_caption_shortcode', 'wpse14305_img_caption', 10, 3 );
share|improve this answer
    
I've found a neater solution, it's posted under the original question: wordpress.stackexchange.com/a/120580/20311 –  pospi Oct 30 '13 at 2:58
add comment

Change

.alignleft.wp-caption { margin: 0 25px 10px 0; }

to

.alignleft.wp-caption { margin: 0 25px 10px 0; width: 461px !important; }

share|improve this answer
add comment

Fancybox (or some other javascript / jQuery element) is setting the width of the image in your markup. If you look at Firebug, you'll see the div element width as 471px, which is 10px wider than your image width.

share|improve this answer
    
It's WordPress - The image shortcode adds a +10 inline width value to the caption div, see here. That'll be the source of the extra width.. ;) –  t31os Dec 18 '11 at 12:59
    
@t31os - so how do I fix it? –  AndrettiMilas Dec 18 '11 at 14:44
    
Run a filter on the shortcode and reduce the width value by 10 or use some CSS to target that specific div and reduce the width. –  t31os Dec 18 '11 at 14:50
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.