Outlook 07/10/13 Issues

问题

In a nutshell I'm using exact target content builder, I uploaded the code into litmus, and of course Outlook 07,10,13 isn't recognizing width 100%. I have attached a screen shot as well as the snippet please assist.

<table width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><a href="sample" title="" alias="" conversion="false" data-linkto="https://"><img data-assetid="35955" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/0edcfa8c-25ad-4b12-8d69-501bde9332ef.jpg" alt="Grocery Discounts" height="45" width="900" style="height:45px;width:900px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></a></td></tr></table>

回答1:

Stack overflow wouldnt allow me to paste the code as well.The offending line was 296. You or the platform had placed a 10px padding around the two column block (extra virgin & long grain one). Once you remove it then it works.

Snippet:

<table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center"><a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title="" data-linkto="https://">
<img data-assetid="35860" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/bf2a32d2-c271-4dd0-88d4-fa1ed13a0668.jpg" alt="$1.00 off California Olive Ranch Olive Oil / $1.00 off Lundberg Family Farms Organic Brown Rice" height="auto" width="100%" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; font-size: 13px;"></a></td></tr></tbody></table></td></tr></tbody></table></td><td class="responsive-td" valign="top" style="width: 50%;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center">
<a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title="" data-linkto="https://">
<img data-assetid="35987" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/3877ff31-7a70-4583-8af9-8cf78ef2032d.jpg" alt="$1.00 off V8 Original Vegetable Juice &amp; Naked Juice Smoothie" height="auto" width="100%" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

You can replace that code on your template or copy the code from fiddle that is in the comment.

Here is the result of the fix.

Cheers

回答2:

Outlook doesn't really like width="100%" and it doesn't like inline CSS. So set your width on the image to width="920" and in style, keep the width:100%; which other browsers will use.

This is the table as an example:

<table width="100%" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td align="center">
        <a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title=""   data-linkto="https://"><img data-assetid="35864" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/b1be6e76-4a9f-4e7a-89cc-5adf22373d62.jpg" alt="View your current grocery savings" height="auto" width="920" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></a>
      </td>
    </tr>
  </tbody>
</table>

---

I should add that your hero image is 900 pixels, which is 100 pixels wider than some email clients like Outlook and Gmail really support. Keep that in mind if you're having issues with other email clients.

You should look at your emails on an iPhone because it's a mess. The same with AOL. In every desktop email client, you have alignment issues with the Discounts Rewards banner.

Good luck.

来源：https://stackoverflow.com/questions/45179213/outlook-07-10-13-issues