Need help? Check out our Support site, then


picture captions in Sandbox

  1. I'm working on the CSS for a blog using Sandbox 1.6.2, and I'm having a problem with picture captions.

    In case you need to see what I'm talking about, here's a link to a post on my test blog.

    Here's the basic markup (just to give the following explanation some focus):

    <div class="wp-caption"><br /> <img><br /> <p class="wp-caption-text"></p><br /> </div>

    I'm finding DIV is 10px wider than IMG. I'd like them to be the same width so that I can define padding once, for DIV, and have it wrap both IMG and P. Can I fix this with CSS?

    My solution right now is I've fiddled with margins on all three elements, which renders fine, but it looks pretty messy in my CSS.

    According to Firebug, DIV is defined a width through element.style. That's not in my CSS, and it's not in the original CSS for the Sandbox 1.6.2 theme, so where is it coming from?

    The blog I need help with is anotherrabbitblog.wordpress.com.

  2. This additional width seems to be added directly within your posts. Could you try to edit your post with the HTML view, and check if you see something like style="width: 226px" ?

    If you remove it from your post, that should solve your problem.

  3. Sadly, that doesn't work. According to the HTML view, both the caption and the IMG are 133:

    [caption id="attachment_108" width="133" caption="Let's see what a really really long caption looks like lorem ipsum"]<br /> <a><img class="size-full wp-image-108" width="133" height="100"></a><br /> [/caption]

  4. What if you add a width value to all your images, like so:

    <br /> .wp-caption {<br /> width: 100%;<br /> }<br />

  5. When the style is on the element like that, it means it is getting printed in the html as inline CSS. Most of the time, that is avoided. Sometimes it's necessary.

    In your case, you can simulate the same padding for the caption that the image has by doing this:

    p.wp-caption-text {
      padding-right: 10px;
    }

    And then adjust the padding on the div from there. For example, you could then make the image + caption block (.wp-caption) have a 10px margin by doing this:

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

Topic Closed

This topic has been closed to new replies.

About this Topic