Blockquote Overlaps Images in IE6

[Sportech]

The problem I am running into is only happening in IE6 and I am assuming it's CSS related. When I use a blockquote and I have an image in the post above the blockquote, the blockquote outline (border) overlaps the image.

Someone on the Wordpress support forums suggested I try using {clear:both;} but that doesn't do exactly what I need. That simply puts the blockquote below the image leaving a large amount of whitespace.

I really like the look how the image overlaps the blockquote and all the text in the blockquote wraps around the image. I've been using it for a while like that with an older version of this theme. IMHO it's a sexy look.

Here is the code in question from my stylesheet...

blockquote {
border-color:#C5C4BC;
border-width:1px 1px 1px 4px;
border-style:dotted dotted dotted solid;
padding:0em 1em;
}

Thanks in advance guys!

[edited by: SuzyUK at 10:05 am (utc) on July 24, 2007]
[edit reason] Please no URI's per TOS #13 [WebmasterWorld.com] [/edit]

[Marshall]

If you can't get it to wrap in IE6 or clear, try an IF statement and insert a <div> to clear the image only in IE6.

Put this in your regular CSS:
#clear{
display:none;
}
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
#clear{ /*IE6 only rule */
width:100%;
height:1px;
display:block;
clear:both;
}
/*]]>*/
</style>
<![endif]-->

HTML

Your Image
<div id="clear></div>
Blockquote

Should work. Otherwise, you could try floating your image to the opposite side you want the text to wrap:
img {
float:left;
}

Marshall