picture captions in Sandbox

  • Author
    Posts
  • #799776

    nicoleblogs
    Member

    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">
    <img>
    <p class="wp-caption-text"></p>
    </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.

    #799884

    jeherve
    Staff

    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.

    #799886

    nicoleblogs
    Member

    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"]
    <img class="size-full wp-image-108" width="133" height="100">
    [/caption]

    #799893

    jeherve
    Staff

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


    .wp-caption {
    width: 100%;
    }

    #799959

    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;
    }

The topic ‘picture captions in Sandbox’ is closed to new replies.