Have you ever had an image show up on your website which is to large, causing problems for your WordPress theme?   This is especially common for WordPress blogs that have multiple authors, where some authors or guest posters may not know how big they can make the images.

Fixing this is incredibly easy with this CSS hack!    All you need to do is take the following code and place it in your stylesheet, setting a maximum width for your images:

.postarea img {
max-width: 500px;
height: auto;
}

In the above code snippet, you’ll want to replace postarea with whatever div ID or CLASS your theme uses for the content.   You can also adjust the 500px to the maximum width you’d like for your images to be.

Note: This hack may not work on some versions of Internet Explorer.

This guest post was written by V Scott Ellis of Blackbox Technologies, a business that helps companies to maximize their web presence.  If you have WordPress knowledge and are interested in writing a post for WordPress Hacks, please contact us.

One of the more common issues with embedding a flash object on your home page (or any page for that matter) is that if it is near the navigation and you have CSS drop-down menus, then you may find your drop-down menu getting lost behind the flash object. If you haven’t dealt with this before it can feel like a nightmare, but fortunately it’s a pretty easy fix.

The Problem: You have a CSS based drop-down menu in your navigation and a flash element near it the menus may get “hidden” behind the flash object.

The Solution: Set the z-index of the div holding the flash to 1 and the z-index of the div holding the nav to 2.

In the flash element:

Look for the flash <object> tag and add the following code:

<param name="wmode" value="transparent">

You’ll want to insert this code right below the <param name=”quality” value=”high”> tag and include the code wmode=”transparent” in the flash <embed> tag .

If you’ve already upgraded to WordPress 2.6, you might have noticed that WordPress handles images a little differently than the WordPress 2.5 branch and below.  The main change is that you can now use the alt field to add a caption, which will wrap a sort of caption below the image.

The problem I’ve had with this new setup is that it can cause some problems when trying to float your images due to the new class=”alignleft”, class=”alignright” or class=”aligncentered” elements.  The image will still move, but I’ve found the text won’t wrap properly around the image.

Thanks to a recent post from Sadish over at WP Lover, it looks like this problem can easily be fixed by by adding some code anywhere into your CSS stylesheet:

img.alignleft, div.alignleft {
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter {
text-align:center;
margin:0 auto;
}

This way the images should float and the text should wrap properly.  Thanks for posting the easy fix Sadish!

Have you ever noticed those images on websites where certain parts of the image are clickable, while other parts aren’t? This process is called image mapping, and Douglas Karr has a great post explaining how to create an image map for your blog.

In his post, Douglas shows you how to take the following image and convert the icons into individual links:

Once down following the steps that Douglas provides, you will have one image that people can use to subscribe to your RSS feed, request e-mail updates, or get your mobile feed.

Great guide Douglas!