7

I'm composing an HTML email which looks fine in every major email client except Outlook 2013, which is adding vertical gaps between my image slices. I unfortunately don't have Outlook 2013 installed on my computer so it's making it hard to test, but a screenshot from my client suggests that it looks like this - screenshot of the offending gaps

My code is available here - HTML version.

I have no idea what more I can do to get rid of the gaps - I've set line-height for the tds and images to zero, I've set the images to display: block, I've set the tables to border 0, cellpadding and cellspacing zero, and border-collapse: collapse. What else can I do to fix it?

Edited to add - I'm actually not sure if the gaps are between images or table rows. From the screenshot it actually looks like it might be the table rows.

Emma W
  • 671
  • 1
  • 7
  • 23

3 Answers3

15

Problem solved - changing the line-height of the tds containing the images to the height of the image, rather than 0, resolves the gaps and doesn't break the layout in other clients. So 

    <td width="150" style="line-height: 83px;">
       <img src="" height="83px">
    </td>
Emma W
  • 671
  • 1
  • 7
  • 23
  • That is a great discovery. Haven't come across that fix before. – John Nov 08 '13 at 14:42
  • John is right that programming the email layout differently would absolutely minimize this problem. That's a technique I use all the time. Avoid the colspans though. Even though they can work, why complicate things. This answer is the quickest and most effective solution. – Darryl Vos Nov 08 '13 at 17:24
  • Eesh, I was about to start tearing my hair out over this one. Good fix. – Aaron Hipple Feb 17 '14 at 23:45
3

You are running into issues because you are going about the whole layout wrong. You shouldn't need to break your watch image up into multiple pieces, and definitely shouldn't have an image containing the letters 'DS' from the title in the center.

Because you have a complex layout, it is better to use colspans and nested tables - it is a cleaner technique than cutting images into little pieces. Images that are cut horizontally will always cause issues - if not in the initial send, Outlook will force gaps in there if it was forwarded anyway. If you must cut an image, try to do it vertically as it will remain perfectly intact in all clients.

It is also good practice to have all CTA's (calls to action) and important copy/text in html, not images, as most clients block images by default. It is also considered spammy to have an email that has a bad ratio of images to text.

Give this a try:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" width="450">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="top" width="400" style="padding:30px;">
           Fall in love with...
          </td>
          <td valign="top" width="50"> <!-- It is easier to split an image vertically -->
            <img alt="Ring Overhang" src="" width="50" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <img alt="Shop now screenshots" src="" width="450" height="200" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450" style="padding-top:30px; padding-bottom:30px;">
            Luxury Watch Brands  <!-- Titles like this should always be in text not images -->
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="150">
                  <img alt="Watch 1" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 2" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 3" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td valign="top" colspan="3" width="250">
      <table width="250" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <img alt="Ring Image" src="" width="250" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            <img alt="Big Watch" src="" width="250" height="450" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            Shop Luxury Watches >   <!-- Call to actions are better in text not images -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
John
  • 11,985
  • 3
  • 45
  • 60
  • I was previously using colspans but was running into even more issues in Outlook (with cell widths rendering incorrectly) than I am now (with cell heights). I agree that having the titles as images is bad practice but have been asked to keep them this way since apparently the font is a crucial part of the branding - this was as close as I could get :/ I actually have now resolved the Outlook table height issue - changing the line-height on the tds from 0 to the height of the row seems to fix the issue. Thanks! – Emma W Nov 08 '13 at 14:33
  • @EmmaW You might [find this useful](http://stackoverflow.com/questions/9697788/html-email-is-colspan-allowed/16964122#16964122) for the issue with Outlook not respecting the colspan widths. – John Nov 08 '13 at 14:42
0

the best output for an emailer can be done by slicing image vertically,(not horizontally) and arrange it in multiple nested in single row . It will work flawlessly in all clients

Umer Farook
  • 368
  • 2
  • 5