Title: wordpress generated styling and caption css Last modified: August 19, 2016 --- # wordpress generated styling and caption css * [billnanson](https://wordpress.org/support/users/billnanson/) * (@billnanson) * [17 years, 2 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/) * Am enjoying the captioning of images, but am frustrated at my inability to alter what I assume to be wordpress generated stylings of the caption. * If I have an image with 560px width, the wordpress generated div (e.g.
) gives a
width of 570px which I certainly didn’t ask for 😉 * I’m currently using the css below, but 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](http://www.burgundy-report.com/wp/wp-content/uploads/2009/01/snap.gif). I want no padding i.e a tight border so I no longer have to manually add it to images – any ideas? Thanks, Bill * .wp-caption { border: 1px solid #ddd; text-align: left; background-color: #f3f3f3; padding-top: 0px; margin: 0px; border-radius: 0px; } * .wp-caption img { margin: 0; padding: 0; padding-right: 0px; border: 0 none;} * .wp-caption p.wp-caption-text { font-size: .80em; line-height: 17px; padding: 0 5px; margin: 0; } Viewing 10 replies - 1 through 10 (of 10 total) * [chaoskaizer](https://wordpress.org/support/users/chaoskaizer/) * (@chaoskaizer) * [17 years, 2 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/#post-958653) * > 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.
style=”width: 570px”>) gives a
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. * Thread Starter [billnanson](https://wordpress.org/support/users/billnanson/) * (@billnanson) * [17 years, 2 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/#post-958770) * 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 * Thread Starter [billnanson](https://wordpress.org/support/users/billnanson/) * (@billnanson) * [17 years, 2 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/#post-958829) * > 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](http://www.burgundy-report.com/wp/?p=2976). Consistent in Firefox 3.0.5 and MSIE7. * Would appreciate a ‘step-up’ Thanks Bill * Moderator [Samuel Wood (Otto)](https://wordpress.org/support/users/otto42/) * (@otto42) * WordPress.org Admin * [17 years, 2 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/#post-958830) * 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. * Thread Starter [billnanson](https://wordpress.org/support/users/billnanson/) * (@billnanson) * [17 years, 2 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/#post-958831) * 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 * [jhm](https://wordpress.org/support/users/jhm/) * (@jhm) * [16 years, 9 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/#post-958937) * 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 * [jhm](https://wordpress.org/support/users/jhm/) * (@jhm) * [16 years, 9 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/#post-958938) * 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 '
' . do_shortcode( $content ) . '

' . $caption . '

'; ``` * (In the original Code there is a (10 + (int) $width) in the style:width definition. * regards, jhm * [AdrianV](https://wordpress.org/support/users/adrian-verstuyft/) * (@adrian-verstuyft) * [16 years, 9 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/#post-958940) * 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. * [sagemintblue](https://wordpress.org/support/users/sagemintblue/) * (@sagemintblue) * [16 years, 4 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/#post-958975) * > 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 '
' . do_shortcode( $content ) . '

' . $caption . '

'; } ``` * 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. * [Jauhari](https://wordpress.org/support/users/jauhari/) * (@jauhari) * [16 years, 3 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/#post-958986) * Just Perfect… thanks for this code Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘wordpress generated styling and caption css’ is closed to new replies. * 10 replies * 7 participants * Last reply from: [Jauhari](https://wordpress.org/support/users/jauhari/) * Last activity: [16 years, 3 months ago](https://wordpress.org/support/topic/wordpress-generated-styling-and-caption-css/#post-958986) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics