[Solved] Border on photo with wp-caption gets cut off

[lydia]

A seemingly simple problem but I can’t seem to find a workaround.

A WordPress site has a custom class of photo-border to add a 10px border. But when a caption is added to a photo that uses the photo-border class, the border gets cut off when floated.

Normal photo with no cut off problem Photo with caption, cut off on right

Looks like it’s a problem with the width of the photo not accounting for the width of the border. I’ve tried variations of overflow:visible, and box-sizing:border-box but nothing has worked. If there was some way to automatically add on 10 more pixels to the width it would solve it, but no amount of padding or margin has worked either. Thanks for any help!

[Paulie_D]

If you could show us a link it would be helpful.

[lydia]

Hi Paulie, there are two links in my post, one showing the way the border should look and the other showing the problem.

[Paulie_D]

Sorry…I assumed those were images.

Hang on.

[Paulie_D]

It looks like the width of that element (#attachment_7193) is hard coded inline CSS

<div id="attachment_7193" style="width: 442px" class="wp-caption alignright">

Admittedly, disabling that property will mess up the layout but that does seem to be the root of the issue.

[lydia]

That div is created automatically when you add a caption. Technically the client could go in and edit the code but I’m trying to find a solution that just fixes it overall instead of adding to their workload.

[Paulie_D]

Hmmm…you see the structure of the two examples you link is different and that, I suspect is why you are getting different results.

That div is created automatically when you add a caption.

I suspect that there are two different post/page templates in play here.

[Senff]

It’s not really eliminating the problem, but here’s something that might help as a workaround:

.wp-caption .photo-border {
    border:0;
}

.wp-caption a {
    border:solid 10px #c0c0c0;
}

[paulob]

How about something like this for IE8+

.content img.photo-border {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-sizing:border-box;
box-sizing:border-box;
}

[lydia]

Hi Senff,

I had tried the exact same thing actually and it does work, but it means they would always have to link the image to something which isn’t ideal. I appreciate the suggestion though… might use as a last resort.

@Paul
wp-caption is always structured as a div as far as I’ve seen (it has to be in order for the words to show up below the image and not randomly on the page). So it kind of has to be structured differently than just a normal image
…not sure how to solve it unless there’s a way of adding some function that would force the div to always be 10px wider than normal. Beyond my skill level.

[paulob]

Hi Lydia,

Try my code out as I’m sure it will do what you want (unless I missed something obvious).

box-sizing:border-box sets the box model of the image to include padding and borders. Your image is set to a max-width of 100% which means that if you add borders it is then too big.

The box-sizing rule above ensures that even if you add padding and borders to the image it will still not be greater than 100% which would seem to be what you want :)

[Senff]

The width of the caption div is always 10 pixels more (styled inline) than the width of the containing image. Standard WordPress functionality, actually.

You could use a jQuery workaround perhaps. Detect the width of the div, add 10 pixels, apply it to the div. Something like this (not tested):

$('div.wp-caption').each(function(i) {
    orgwidth = $(this).width();
    newwidth = orgwidth + 10;
    $(this).width(newwidth+'px');
});

[lydia]

That worked like a charm, paulob. I somehow missed your post before. High five!

Thanks for the explanation as well. I had been trying box-sizing but on the div instead directly on the image.

[paulob]

Hi Lydia,

Glad it helped.

You may also want to address the smaller screen size as the image container is being sized much too big by that inline style on smaller screens. It might also be neater to pad the caption a little.

.wp-caption .wp-caption-text{padding-right:20px}

@media only screen and (max-width: 767px) {
.wp-caption{width:100%!important}
}

You’ll have to test that though as I know little of wordpress and whether it will conflict with anything else. :)

[lydia]

Thanks for drawing my attention to the mobile styles, I didn’t realize it was so off. Your suggestion fixed it.

@Senff thanks for your jquery suggestion, I’m glad it didn’t come to that though :)

[Author]

Posts