Image Caption Not Working? The CSS Solution

You have probably known by now that one of the latest addition to WP 2.6 – among other great features – is the Image Caption – a little description of the image derived from the ALT text.

The theory is ALT text to your image is what you describe the image to the Search Engines. For SEO purpose, it should always be optimized with the use of proper keywords.

Well, to tell you the truth, I’m not too fond of image caption as I always think the image is better off without it and to make the matter worst, what I see on the editor is not what I see on preview.

I assume that to the majority of us, the image caption will not display properly the way it should on the published post. Since it’s one of the default features that comes with the package, I was just wondering why there isn’t any official guide on how to make the caption work – properly.

So in the spirit of sharing, I’d like to share with you the solution to fix it by adding some CSS elements to control the visual appearance of your image and its caption.

Image Caption at Work

This is Image Caption

Adding CSS Style to Your Stylesheet

/* IMAGE CAPTION
/* ----------------------------------------------*/

.wp-caption {
      border: 1px solid #ddd;
      text-align: center;
      background-color: #f3f3f3;
      padding-top: 4px;
      margin: 10px;
      /* For rounded corner */
      -moz-border-radius: 3px;
      -khtml-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      }

.wp-caption img {
      margin-bottom: 5px;
      padding: 0;
      border: 0 none;
      }

.wp-caption p.wp-caption-text {
      font-size: 11px;
      line-height: 17px;
      padding: 0 4px 5px;
      margin: 0;
      }

/* IMAGE POSITIONING
/* ----------------------------------------------*/

.aligncenter, div.aligncenter {
      display: block;
      margin-left: auto;
      margin-right: auto;
      }

.alignright {
      float: right;
      }

.alignleft {
      float: left;
      }

Credit goes to Isaiah for the solution.

To stay updated with the latest blogging tips, get the daily update into your inbox via email subscription. Happy blogging!

Related posts

• 5 Little Known Way to CSS Styling Your Blog Let me just say this is supposed to be the second part of which I wrote a couple of...
• How To Enable Gravatar On Your Blog Without Plugin Do you know WordPress 2.5 has a built-in feature? Have you tried to enable it and still no picture...
• D-I-Y Image for Your Blog You’d Not Want To Miss The above iPhone image is created using the creative online tool of RedKit. What I like about it is...
• Congrats! Here’s The Winners! First of all, I regret to inform all the contestants that one of our sponsor, PB has recently sold...
• How I Make Money Online with HubPages? Yes! You’ve arrived at Yan’s blog. This is the NEW (albeit, half-baked) thoushallblog.com. After much contemplation and with the...

Sponsor of The Month

• Keyword Academy
  If you are struggling to make money online, this is where you'll get the method, the support, and the tools you need to build a sustainable low-maintenance income online.
• Is Your Brand Here? Advertise with Us!

Tagged as: image, image caption