in Firefox I still get padding of 4px between the image and its border, and for IE7, padding to the (only to the) right as in the appended image.
There is extra padding inherit from .storycontent img{padding:4px} (style.css line 139) try reset it too. For MSIE I think it doesnt parse float very well, try play around ‘div.alignleft, div.alignright, img.alignleft, img.alignright’.
generated div (e.g. <div id=”attachment_2939″ class=”wp-caption alignnone” style=”width: 570px”>) gives a <div> width of 570px which I certainly didn’t ask for 😉
The caption need a fixed dimension to centered properly, without a fixed width certain browser will not render it, one’s of the reason its automatically generate.
Dear chaoskaizer – thanks for the tips.
Putting .wp-caption img rule after .storycontent img{padding:4px} in style.css at least means that Firefox is behaving exactly as MSIE7 with padding now only on the rhs.
Will try ‘playing around’ as you suggest tomorrow…
tks
try play around ‘div.alignleft, div.alignright, img.alignleft, img.alignright’.
Dear chaoskaizer – I’ve tried all combinations of div.alignleft, div.alignright, img.alignleft, img.alignright that I can come up with, all with padding set to zero – but I remain with a DIV at 570px versus and image of 560px so too much padding on RHS like here. Consistent in Firefox 3.0.5 and MSIE7.
Would appreciate a ‘step-up’
Thanks
Bill
The DIV will always get an explicit style of the width of the image (on the page, not necessarily the actual width of the image) plus 10 pixels. This is hardcoded, it cannot be easily changed through styling alone. The extra 10 pixels are to give it a 5 px border around the sides.
Changing it involves replacing the captioning code with a filter or something similar.
Dear Otto42 – that’s kind, but absolutely meaningless to me in terms of next steps :0)
I do understand though what you mean about the div not necessarily being what you see, as I have found that I can make Firefox work fine (HOORAY!!!) by hiding the following in the css:
/*.alignleft {
float: left
}
img.alignleft, div.alignleft
{float:left; margin:0 0.5em 0.5em 0;
}*/
and changing my .wp-caption to give a 17px bottom padding:
.wp-caption {
border: 1px solid #ddd;
text-align: left;
background-color: #f3f3f3;
padding-top: 0px;
padding-bottom: 17px;
margin: 0px;
border-radius: 0px;
}
Trouble is (needless to say) these things made zero difference to MSIE7…
Bill
CSS wont help you, unless your images have always the same width, then you could force a width with
width:300px !important;
but this 10 extra pixels are actually added by wordpress and its get done by some sort of hardcoded way (-> into the html tag) – that way you can’t make the box “10 pixel smaller” via css. i think the only solution is to find that section in the WP code and disable the addition.
regards
If it still matters – you can fix your problem in wp-includes/media.php in line #596 (WordPress 2.8 – maybe in another line in other WP Versions):
return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . ($width) . 'px">'
. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
(In the original Code there is a (10 + (int) $width) in the style:width definition.
regards,
jhm
And to not alter hardcoded files (you would loose your changes with the next update or you have to manually alter it again) simply give the .wp-caption class a negative margin:
e.g. margin-left: -10px;
depending on your alignment of course.
That always worked for me in FF or IE.
And to not alter hardcoded files (you would loose your changes with the next update or you have to manually alter it again) simply give the .wp-caption class a negative margin:
e.g. margin-left: -10px;
depending on your alignment of course.
That always worked for me in FF or IE.
Better yet, if you’re working with your own theme, you can simply override the internal WP function in your theme’s “functions.php” file with a new definition which omits the extra 10px:
/*
* Fix the extra 10 pixel width issue for image captions
*/
add_shortcode('wp_caption', 'fixed_img_caption_shortcode');
add_shortcode('caption', 'fixed_img_caption_shortcode');
function fixed_img_caption_shortcode($attr, $content = null) {
// Allow plugins/themes to override the default caption template.
$output = apply_filters('img_caption_shortcode', '', $attr, $content);
if ( $output != '' ) return $output;
extract(shortcode_atts(array(
'id'=> '',
'align' => 'alignnone',
'width' => '',
'caption' => ''), $attr));
if ( 1 > (int) $width || empty($caption) )
return $content;
if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
return '<div ' . $id . 'class="wp-caption ' . esc_attr($align)
. '" style="width: ' . ((int) $width) . 'px">'
. do_shortcode( $content ) . '<p class="wp-caption-text">'
. $caption . '</p></div>';
}
Note that there’s likely a better way to do this using filters, but I wasn’t able to get it to work, perhaps due to passing of multiple parameters to the filter function.
Just Perfect… thanks for this code
