WordPress Download Page
WordPress Download Page

Got a call yesterday from a buddy of mine who had just upgraded his blog to WordPress 2.6 and found he wasn’t able to get images to align in his new posts the way he did before. No matter what he did the images just displayed one way.

I knew right away what his problem was because I’d seen the same thing when I upgraded SuccessCREEations.

Adjusting to New Features

The culprit is the new image caption feature that was added in WordPress 2.6, which is something both me and my buddy who called are glad they added.

However, to make it possible for the captions display under images, WordPress has added an extra div around images. This extra div requries a style sheet adjustment for many WordPress themes.

Many theme designers style the post images either within a div for the specific post content area or within a paragraph so you might see something like this in your style sheet:

#postcontent img .alignright {…

OR

p img .alignleft {…

Trouble is, the extra div now overrides those CSS attributes, meaning that if there is no specific entry in the style sheet for the new div class the associated image styling will cascade back up to any generic img styling (if it even exists.)

In my buddy’s case the default image styling was aligned to the left so no matter how he formatted the image in his post text area it stayed the same when published.

The Fix

There are a couple ways you can fix the problem. The one you choose will depend on your own stylesheet.

The easy fix is to just add generic classes for left and right aligning everything. For example

.alignleft {…

OR

.alignright {…

But you many not want everything those two classes formated the same way. The good news is, if you added a caption to your image then WordPress adds the class “wp-caption” to that div for you. So you can use that class to uniquely style that div (and the image it contains). For example

.wp-caption .alignleft {…

OR

.wp-caption .alignright {…

And while you’re at it you can even style the text of the caption using the “wp-caption-text” class.

Change can be frustrating, I know. Fortunately the good folks at WordPress do a really good job of consistently making chages that improve things for us and avoid changes just for the sake of something different.

css.php

SuccessCREEations is now Kingdom House Productions

X