WordPress.org

1. midstatelitho
   Member
   Posted 3 years ago #

   I've created a custom template (based on classic) to match our existing site. I'd be happy to share a link if it will help but I'm pretty sure I've narrowed down my problem.

   When I attach an image and apply a caption to it, the div for the caption seems to add a 10px margin which throws off the entire layout.

   My column width is 380, and the attached image itself is 380. The div for the caption that surrounds the image has a style attribute that has a width of 390. Now I cannot figure out where this number 390 is coming from. Here's the source code I'm getting

   <div id="attachment_28" class="wp-caption alignnone" style="width: 390px"><img class="size-medium wp-image-28" title="anilox_400" src="http://www.midstatelitho.net/articles/wp-content/uploads/2008/11/anilox_400-300x240.jpg" alt="Anilox Roller Cells Magnified at 400x" width="380" height="321" /><p class="wp-caption-text">Anilox Roller Cells Magnified at 400x</p></div>

   I've searched high and low through my source and can't seem to find it. It seems strange that the number 390 would be written into the template code so I assume there's a calculation somewhere in the caption code that is coming up with 390.

   Any ideas?

2. midstatelitho
   Member
   Posted 3 years ago #

   line 375 in wp-includes/media.php

   change 10 to 0

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

3. joelhardi
   Member
   Posted 3 years ago #

   I would unmark this as "resolved" if I were you ... to me this "feature" is a bug. This kind of thing shouldn't be hardcoded deep in a core WP library. It should either be removed entirely (which I would prefer) or be configurable via the Settings (there are already places under the Miscellaneous panel where image thumbnail sizes are set) or as a PHP constant or global you can define in your theme.

   I don't get why they did this. It's so easy to just do

   .wp-caption {
padding: 0 5px 0 5px;
}

   or whatever to achieve the same visual effect.

   This is annoying in my case because I don't want this extra gap around my images. The CSS2 spec says you have to define a width for any floated element (the div in this case) so I appreciate what WP is trying to do, I just wish it wouldn't add the 10px!

4. jpadie
   Member
   Posted 3 years ago #

   i posted a plugin solution in this thread.
   http://wordpress.org/support/topic/189254?replies=13#post-925819

5. ohnoezitasploded
   Member
   Posted 3 years ago #

   the code actually adds a hardcoded element style width of 10px + the image width to the html:

   style="width: ' . (10 + (int) $width) . 'px"

   so then in your html you have:

   <div style="width: 810px">...</div>

   For every single captioned picture in your site. Which just seems like bad code to me. Stuff like this is what CSS was invented for.

   I took out that whole part, rather than just the 10px padding, and my stuff still looks fine in IE, FF, and Chrome.

6. kove
   Member
   Posted 2 years ago #

   I dont like that +10px thing neither, can someone tell me why they added it, and why they keep it?

   Is like a workaround to something..?

Topic Closed

This topic has been closed to new replies.