0

enter image description here

I'm using all the usual tricks: border="0" on img, style:display: block on img ... nothing seems to work. I'll not that I'm slicing up the images in photoshop and exporting with "save for web", save as "HTML and Images." This happens all the time, everytime I use this slicing method. The PS feature writes table-based markup which is ideal for emails (as you can't use divs and expect them to work in email templates).

Sometime I will reslice everything using different areas and it works but that is a lot of work. I'd like to get it right the first time I slice up everything! And yes, I've read all the topics on here about horizontal spaces in outlook and nothing seems to work.

Here's the markup (image locations removed):

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices -->
<table id="Table_01" width="600" height="1093" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="8">
            <img border="0" style="display: block;" src="" width="600" height="98" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img border="0" style="display: block;" src="" width="600" height="119" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img border="0" style="display: block;" src="" width="182" height="442" alt=""></td>
        <td colspan="6">
            <img border="0" style="display: block;" src="" width="418" height="442" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img border="0" style="display: block;" src="" width="182" height="51" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="140" height="51" alt=""></td>
        <td colspan="5">
            <img border="0" style="display: block;" src="" width="278" height="51" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img border="0" style="display: block;" src="" width="600" height="128" alt=""></td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="150" height="91" alt=""></td>
        <td colspan="3">
            <img border="0" style="display: block;" src="" width="315" height="91" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="38" height="91" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="42" height="91" alt=""></td>
        <td colspan="2">
            <img border="0" style="display: block;" src="" width="55" height="91" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img border="0" style="display: block;" src="" width="600" height="79" alt=""></td>
    </tr>
    <tr>
        <td colspan="7">
            <img border="0" style="display: block;" src="" width="599" height="84" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="1" height="84" alt=""></td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="150" height="1" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="32" height="1" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="140" height="1" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="143" height="1" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="38" height="1" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="42" height="1" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="54" height="1" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="1" height="1" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Chris Scott
  • 583
  • 1
  • 7
  • 23

2 Answers2

1

It is really bad practice to build an entire email of of images. It doesn't render by default in most email clients, takes a long time to download and also triggers some spam filters because your image to text ratio is so low.

That being said, you are getting the vertical gaps because Outlook doesn't know how wide to make each of your cols when you use a colspan in the first row. See this answer for more information on how to enforce the col widths.

Update - Because you want to vary the widths of your cells, you need to use nested tables instead. You can not change the widths of tables from row to row. Here is an example of how you can construct this entire email with nested tables and without a single colspan:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices -->
<table id="Table_01" width="600" height="1093" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="98" alt="">
        </td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="119" alt="">
        </td>
    </tr>
    <tr>
      <td>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td>
                <img border="0" style="display: block;" src="" width="150" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="315" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="38" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="42" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="55" height="91" alt="">
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
        <td>
            <img border="0" style="display: block;" src="" width="182" height="442" alt="">
        </td>
        <td>
            <img border="0" style="display: block;" src="" width="418" height="442" alt="">
        </td>
        </tr>
      </table>
      </td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="128" alt="">
        </td>
    </tr>
    <tr>
        <td>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                  <img border="0" style="display: block;" src="" width="150" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="315" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="38" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="42" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="55" height="91" alt="">
              </td>
            </tr>
          </table>
        </td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="79" alt="">
        </td>
    </tr>
    <tr>
        <td>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                  <img border="0" style="display: block;" src="" width="599" height="84" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="1" height="84" alt="">
              </td>
            </tr>
          </table>
        </td>
    </tr>
    <tr>
        <td>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                  <img border="0" style="display: block;" src="" width="150" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="32" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="140" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="143" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="38" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="42" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="54" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="1" height="1" alt="">
              </td>
            </tr>
          </table>
        </td>


    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

As I mentioned before, you should avoid images and use text where text is, not an image of text. Here is an example of how your middle section should look like (the part with the images stacked on the left and text on the right):

  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="182" style="padding-bottom:20px;">
          <img border="0" style="display: block;" src="" width="182" height="120" alt="">
      </td>
      <td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
          Text 1
      </td>
    </tr>
    <tr>
      <td width="182" style="padding-bottom:20px;">
          <img border="0" style="display: block;" src="" width="182" height="120" alt="">
      </td>
      <td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
          Text 2
      </td>
    </tr>
    <tr>
      <td width="182" style="padding-bottom:20px;">
          <img border="0" style="display: block;" src="" width="182" height="120" alt="">
      </td>
      <td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
          Text 3
      </td>
    </tr>
  </table>
Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
  • I agree that it's really bad practice. However, when your client forces you to create and send blasts with three custom email templates per day which must work in 20+ email clients, there really is no alternative. I've tried the solution you linked to before and it didn't fix anything. Will try again for this email though. – Chris Scott Mar 11 '14 at 18:18
  • Actually there's no way that solution linked to would work because some rows have varying TD widths. – Chris Scott Mar 11 '14 at 18:20
  • That is something that will never work in html. You must have all `` widths in all rows the same, except for when you are spanning multiple ``'s (and then it still needs to add up to the total width of the cells you are spanning). If you want to do what you are asking, you need to nest a new table inside a larger spanned `` row. You can then establish new widths inside that table. – John Mar 11 '14 at 21:15
  • In this particular instance, it worked by adding the width on the TDs. But I know from experience that method is unreliable. I'll use nested tables in the future. Sucks that you need to create a frickin TABLE to imitate the effect of floating text next to an image or have varying td widths... using the nested table method, I literally have as many as 15 tables in an email. It's absurd but I guess this is what it has come to thanks to microsoft. – Chris Scott Mar 13 '14 at 17:24
1

I was able to fix the issue by adding widths on each of the TDs.

Chris Scott
  • 583
  • 1
  • 7
  • 23