Problems adding CSS speech bubble layout in posts

I’m attempting to use something along the lines of these speech bubbles in WordPress posts. I have the html and CSS working great separately, but when I add the CSS to styles.css and copy-paste the html into a post, it doesn’t look anything like what it’s supposed to. My CSS margins are ignored or changed, the global CSS blockquote and img properties are affecting it, the floats don’t work, etc, etc.

It’s clear that this is a problem with the theme’s global CSS styles cascading to break my own CSS layout. What can I do to fix that kind of problem?

For example, in the CSS snippet below, I thought that defining the img tag for div.avatar would override the global WordPress properties for img, but it doesn’t:

div.avatar img {
border: solid #ccc 1px;
}

It apparently only modifies are adds to the global img properties. Why the hell is that? And isn’t there some sort of way to tell a portion of CSS to NOT cascade / inherit from other properties?

Thanks a lot!

-Ian

P.S. Here’s the site where you can see the broken bubbles: http://regrettablemusic.com