I am trying upgrade my HTML email so that images within each article allow the following paragraph's text to wrap around it. I read containing such an image within a \[code\]align="left"\[/code\] table was best, rather than putting that attribute on an exposed \[code\]img\[/code\] element.I have gotten it to work fine for all non-Outlook email clients, but as soon as that \[code\]align="left"\[/code\] attribute is added to the image's table container, the \[code\]div\[/code\] that contains both the aligned table and the wrapped text (a single \[code\]p\[/code\] element) is rendered without a border - but only where the aligned table seems to abut it (to the left and above are missing parts of the border).It's very bizarre. As you can see in the before/after of Outlook, the border styles on the container \[code\]div\[/code\] render fine when the table is not aligned left.Is there something I can do to stop that aligned table from killing the border styles of the container div? I was hoping avoid expanding the HTML into more tables or use image spacers; if not for this obscure issue all, my \[code\]div\[/code\] css as you see it have been working fine in Outlook.Screenshot of what is desired and what code looks like rendered in Apple Mail, for example (yellow table background color added for emphasis and to denote \[code\]td\[/code\] padding):
Outlook '07 before adding the \[code\]align="left"\[/code\] attribute to the table:
Outlook '07 after adding the \[code\]align="left"\[/code\] attribute to the table:
And without further ado, the XHTML 1.0 Strict code*:\[code\]<div class="content" style="border-left-width: 8px; border-left-style: solid; border-top: 1px dotted #bababa; padding-left: 17px; padding-bottom: 15px; padding-top:25px; border-left-color: #0c63b8;"> <table bgcolor="yellow" width="160" cellpadding="0" cellspacing="0"> <tr> <td width="160" style="padding-right: 20px; padding-bottom: 20px;"> <a href="http://stackoverflow.com/questions/14512960/#"><img src="http://www.eastendhouse.org/sites/default/files/imagecache/eNews-small-160/images/news/IMG_1547.JPG" alt="" title="" width="160" height="120" border="0" style="vertical-align: bottom;" /></a> </td> </tr> </table> <p style="margin: 0; padding: 0; margin-bottom: 13px; margin-top: 0px !important;">Et quinta decima eodem modo, typi qui nunc nobis videntur parum clari fiant sollemnes in. Quam littera gothica quam nunc putamus parum claram anteposuerit litterarum formas humanitatis per seacula quarta decima. Tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim. Typi non habent claritatem insitam est, usus legentis in iis. Sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Claritatem Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius! Eu feugiat nulla, facilisis at vero eros et accumsan et iusto odio. Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi nam liber assum qui.</p></div>\[/code\]- This code doesn't include the \[code\]<h2>\[/code\] element above the \[code\]div.content\[/code\] element, but I can include later if it helps.