• Hi there,
    I’ve been finding that styling the wp-caption very difficult. If I insert an image and caption I end up with the following code in my admin:
    [caption id="attachment_28" align="alignright" width="250" caption="This is a fancy caption"]<img src="https://...wordpress.gif" alt="This is a fancy caption" title="wordpress" width="250" height="100" class="size-full wp-image-28" />[/caption]Lorem ipsum ...

    Which results in this appearing in the source code:
    <p><div id="attachment_28" class="wp-caption alignright" style="width: 260px"><img src="https://..wordpress.gif" alt="This is a fancy caption" title="wordpress" width="250" height="100" class="size-full wp-image-28" /><p class="wp-caption-text">This is a fancy caption</p></div>Lorem ipsum...</p>

    Because the image caption gets inserted within my paragraph tags, that text isn’t the same size as the other paragraphs. I’ve tried all sorts of css variations, switched from ems to px, but nothing works.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter Christine Rondeau

    (@crondeau)

    I haven’t tested this with WP 2.8 yet and so not sure if this is fixed, but am I to believe that no one else as come across this before?

    Same issue. Any luck?

    Can i see a page where you have this issue?

    Pretty sure you can do this with CSS, i’ll just need to see a page where the problem exists.

    @t31os_
    https://mibsolutionsllc.com/icontact/?page_id=2

    If you could help me remove the para div WordPress embeds that would be amazing. The issue is I have line-height declaration on content p, and this is messing up my caption p ??

    The easiest way to deal with this, rather then trying to remove a hard-coded element is to force the caption definitions..

    The problem:

    You set various attributes on any P element that is a child (inside of) the content element, this will naturally cascade onto all P elements if they are inside the content area…

    The solution:

    Force the defintion, by giving the attributes that won’t stick (any that exist for the above mentioned definition) an !important declaration.

    Basically when you do this.. (purely example)
    .content p {line-height:10px}
    You’re effectively targeting any paragraph inside the content area, regardless of whether it has a class, id or none.

    In order for any re-declaration of a previous defined attribute you will need to add !important on the end..

    mibsolutionsllc
    in your case, find this in your stylesheet.

    .wp-caption p.wp-caption-text {
       font-size: 14px;
       line-height: 3px;
       padding: 5px;
       margin: 0;
       color:#2C8CBD;
    }

    … and add !important to any definition that won’t stick, such as line-height, like so…

    .wp-caption p.wp-caption-text {
       font-size: 14px;
       line-height: 3px!important;
       padding: 5px;
       margin: 0;
       color:#2C8CBD;
    }

    … do that for each definition that doesn’t currently apply as you want it to, so if the padding isn’t applying, then do the same with that..
    Example:
    padding: 5px!important;

    I’m off out for lunch shortly, but i’ll check back on the thread once i return, so feel free to post back if you’re still having problems…

    This worked perfectly! You are a genius.

    SO I just add !important to a css field if I want to make it override something else! Brilliant!

    Glad i could help…. ??

    This is kind of funny. The !important trick doesn’t work with my sites using the Tarski theme.

    Having the line height mixed up is awkward enough, but this wp-caption thing even swallows the paragraph break.

    The only thing that helps is putting the entire wp-caption stuff between div and /div. And that is rather difficult to explain to a client.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Image Caption affection font size in paragraph’ is closed to new replies.