WordPress.org

1. Christine
   Moderator
   Posted 3 years ago #

   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="http://...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="http://..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.

2. Christine
   Moderator
   Posted 2 years ago #

   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?

3. mibsolutionsllc
   Member
   Posted 2 years ago #

   Same issue. Any luck?

4. Mark / t31os
   Moderator
   Posted 2 years ago #

   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.

5. mibsolutionsllc
   Member
   Posted 2 years ago #

   @t31os_
   http://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 :(

6. Mark / t31os
   Moderator
   Posted 2 years ago #

   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...

7. mibsolutionsllc
   Member
   Posted 2 years ago #

   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!

8. Mark / t31os
   Moderator
   Posted 2 years ago #

   Glad i could help.... :)

9. Andreas
   Member
   Posted 2 years ago #

   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.

Topic Closed

This topic has been closed to new replies.