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 align="left" table was best, rather than putting that attribute on an exposed img element.
I have gotten it to work fine for all non-Outlook email clients, but as soon as that align="left" attribute is added to the image’s table container, the div that contains both the aligned table and the wrapped text (a single p 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 div 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 div 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 td padding):
Outlook ’07 before adding the align="left" attribute to the table:
Outlook ’07 after adding the align="left" attribute to the table:
And without further ado, the XHTML 1.0 Strict 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="#"><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>
– This code doesn’t include the <h2> element above the div.content element, but I can include later if it helps.
Expanding on the Solution
After being guided down the path of putting the text inside the same table cell as the left-aligned image by @john, the odd problems I described with the containing div went away, and the text wrapped properly:
Notice though the new containing table is adding odd space to the right (the white column under the dotted top-border to the right of the table), which I was unable to correct for with this solution.
Furthermore, since the accepted answer did not include the link surrounding the image nor the p tag containing the wrapped text, I ran into the issue where an empty line showed up between the top of the image and the beginning of the text – any block element containing the wrapped text caused this issue with the linked image:
By experimentally nesting the image itself inside its own single-cell table and aligning that to the left as well, I was able to kill two birds with one stone (and a lot of extra HTML, unfortunately). I also moved some of the container div padding/border styles to the new containing table:
This stopped the containing table from adding space to the right of the copy, as well as allowed me to use the image’s containing td padding styles (green) to give me the clear-space I needed around the images. I admit adding space to the original image rather in the HTML would be cleanest, but as this is a dynamically generated email that shares images with its parent website, that wasn’t an option in this case.
Here is the final working code with help from @john:
<div class="content" style="border-left-width: 8px; border-left-style:solid; padding-bottom: 15px; border-left-color: #0c63b8;">
<table width="392" border="0" cellpadding="0" cellspacing="0" bgcolor="yellow" style="border-top: 1px dotted #bababa;">
<tr>
<td width="392" style="padding-top: 25px; padding-left: 17px;">
<table align="left" cellpadding="0" cellspacing="0" border="0" bgcolor="green">
<tr>
<td style="padding-right: 20px; padding-bottom: 10px;">
<a href="#"><img style="margin: 0; border: 0; padding: 0; display: block;" align="left" src="http://www.eastendhouse.org/sites/default/files/imagecache/eNews-small-160/images/news/IMG_1547.JPG" alt="" title="" width="160" height="120" /></a>
</td>
</tr>
</table>
<p style="margin: 0; padding: 0; margin-bottom: 13px; margin-top: 0px !important;">Lorem ipsum dolor sit amet consectetuer Vestibulum felis tristique morbi eget. Vel leo felis id egestas Vestibulum Fusce lobortis enim netus rutrum. Urna Aliquam dis consequat neque orci leo pellentesque semper leo accumsan. Est lacus Vestibulum rutrum id libero dui consequat ligula interdum Maecenas. In molestie risus iaculis libero turpis faucibus ipsum tincidunt In enim. Consectetuer Donec at tellus mus Pellentesque wisi vitae Maecenas augue tellus. Integer.</p>
</td>
</tr>
</table>
</div>
Instead of trying to debug, I’ll offer a solution that I know works:
You can play with padding-right and padding-bottom on the image, but for simplicity, in my example I put a transparent ‘padding’ into my png image.