This is unlike anything I've read about and I've been totally scratching my head for the last few hours trying to figure out what's going on.

I have a hand-coded site @ hartbro.com Part of the site is a blog, in which I include pictures. Here's the HTML code around one of the images that's causing trouble.

<a href="blogcontent/090811.jpg" class="img">
<img src="blogcontent/090811.jpg" alt="Downed trees" width="25%" class="floatright" /></a>
The storm left as quickly as it came. The sky cleared up and we were glad that the oppressive heat had let up.

What I've noticed is that, on some of the blog entries that include more than one image, the 2nd image isn't really floating like its supposed to be, with the text wrapping around it. I figure its got to be some sort of conflict with some CSS that I have that's causing the problem but I just can't figure out what it is.

I don't understand how it works in FF & IE but not Chrome or Safari??

Here's all of the relevant CSS, let me know if you need anything else. Thanks in advance.

img{
margin:10px;
}

img.floatleft{
float:left;
}
img.floatright{
float:right;
}

edit: here's an screen-shot of what's happening.