0

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):

Code rendered correctly as desired

Outlook '07 before adding the align="left" attribute to the table:

Outlook '07 before aligning left

Outlook '07 after adding the align="left" attribute to the table:

Outlook '07 after aligning left

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:

After applying accepted answer's code

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:

Issues with linked image and paragraph

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:

Working, desired layout and spacing

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>
0

2 Answers 2

0

Instead of trying to debug, I'll offer a solution that I know works:

<!-- Text Padding -->
                          <table width="580" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="005288">
                            <tr>
                              <td width="30">
                              </td>
                              <td width="520">
<!-- Floating Image -->
<img style="margin: 0; border: 0; padding: 0; display: block;" align="left" src="Images/.png" width="250" height="200"
alt="">

<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #FFFFFF;">
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.
<br><br>
Sed id facilisis ipsum enim suscipit Aenean ut lacus euismod cursus. Fermentum Phasellus Ut et nec molestie Quisque enim Vestibulum quis a. Maecenas condimentum Phasellus Nam fringilla aliquet Phasellus malesuada Cum egestas quis. Nibh justo fames ac ante at dolor facilisi vel Nulla et. Laoreet ut laoreet Curabitur libero dictumst cursus Nunc vitae sem orci. Pellentesque convallis pretium wisi vel interdum morbi Pellentesque et.
<br><br>
Hendrerit quam dui sapien est auctor at ante pretium id interdum. Quis lacus habitant elit non felis Curabitur congue lacus dui Curabitur. Elit dui a ac risus iaculis risus justo condimentum Vestibulum habitasse. Curabitur sed neque tempus congue tortor rutrum Donec et vitae congue. Tellus ipsum mi semper netus egestas Sed laoreet netus Proin elit. Ac sed Morbi.
</font>

                              <td width="30">
                              </td>
                            </tr>
                          </table>

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.

2
  • Also, I was unable to change the padding, margin, and border on the image itself to force space around it. I believe with Outlook one must use the hspace/vpsace attributes as the only way to achieve this. Hence another good reason for nesting within another table.
    – atwixtor
    Jan 25, 2013 at 16:52
  • Your answer does indeed give me text wrapped around that image without breaking the container styles. However there were still some odd spacing issues stemming from the elements around the image (see edited question above), which required me to add an additional layer of nested tables. Thank you for putting me on the right path!
    – atwixtor
    Jan 25, 2013 at 17:01
0

Maybe you try adding a margin: 8px; attribute to the TABLE style?

The 8px is just an example I should think that 2px is just as fine

5
  • Hmm, I thought that might work as you'd think it'd move the table further away from the container borders, but it does not. In fact, it causes even stranger problems around the table
    – atwixtor
    Jan 24, 2013 at 23:58
  • What is your document type declaration? HTML4.1? 1.0 XHTML Transitional/Strict? or HTML (as in html 5) or other?
    – Zeddy
    Jan 25, 2013 at 0:27
  • I refer you to this page (campaignmonitor.com/css) which has a list of the supported CSS features for various browsers. It states that certain features are not supported in the box model for SPECIFIC tags. This would mean by changing your TAG type you can probably come up with a suitable solution.
    – Zeddy
    Jan 25, 2013 at 0:39
  • It's XHTML 1.0 Strict, which is a requirement here - sorry I didn't mention that. That chart contradicts the fact that my div padding is indeed working fine in Outlook (the "before" situation), so it makes me mistrust the actual compatibility. There's just some unknown issue with combining a nested, aligned table within it that I need help with.
    – atwixtor
    Jan 25, 2013 at 1:00
  • 1
    No Problem. With regards to the link it seems to redirect to the home page (shame) not the page I saw with the checkmarks and crosses so maybe you may even be better off referring to the microsoft site (msdn.microsoft.com/en-us/library/aa338201(office.12).aspx)
    – Zeddy
    Jan 25, 2013 at 1:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.