Mileena

I’ve been trying to fix an issue with image alignment for the past several hours. If I aligned an image to the right, it would break through the entry box. I finally managed to fix it and it now displays properly in Firefox and Opera, with the exception of IE7. So now I have to spend even more time figuring out a hack to make it work in IE7. I hate you, Microsoft.

Shang Tsung

Edit: Add Safari (recently ported to Windows) to the list of browsers it displays properly in.

Edit #2: It didn’t need a hack after all. It was just missing a float:right in the class. It seems to be working in the fore mentioned browsers now. I’m not going to bother with IE6 compatibility, except for maybe a PNG alpha transparency hack. Otherwise, if you’re not with the times, tough luck. After all, it’s just a blog that nobody reads.

If you’re interested in the fix, here’s what I did. This is all done with CSS:

.imgright {
        margin-left: 10px;
        margin-bottom: 10px;
        float: right;
}

This will align it right with a margin of 10 pixels to the left so that the image and text won’t be touching. I also added 10px to the bottom for the same reason. I made an imgleft class as well by just changing the float to float:left and the margin to margin-right. This next bit is what really fixes the image from breaking through the entry box:

div .imgpost {
        clear: right;
        line-height: 0;
        height: 0;
}

Whenever I have an image in a post that hasn’t enough text to size the entry box beyond the height of the image, causing the break, all I need to do now is add a div with the imgpost class to the very end of my post, like so:

<div class="imgpost"></div>

I called it imgpost because it’s easy to remember. Now whenever I add an image to my post, I simply add a class to my img tag using either imgleft or imgright, adding the imgpost bit at the very bottom if necessary.

I didn’t create the Street Fighter-style Shang Tsung and Mileena images above that I used for testing, obviously, but I’d really like to know who did.