Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Borders in Outlook is offset by 1 pixel

natallia

Newbie
Total Posts:  13
Posted: 09 March 2017 01:05 AM

Attached is a screenshot of the Outlook email showing the border being offset by 1 pixel on the left-hand side.

This is the test summary:

https://www.emailonacid.com/app/acidtest/display/summary/CiArACsfEeDEX0U0NghMk1xh3R5RIVzZ4eBhOdbWBb0RT

It doesn’t seems to be affected by setting the main outer table’s width to 99%. And it spans by 2 table rows.

This issue only appears on all Outlook desktop clients. Outlook.com on all browsers are not affected. It’s confusing.

Example:

https://www.emailonacid.com/app/acidtest/display/result/CiArACsfEeDEX0U0NghMk1xh3R5RIVzZ4eBhOdbWBb0RT/71/

Does anyone know how to fix this?

Code below:

<table class="push" cellpadding="0" cellspacing="0" border="0" align="center" style="width:99%;text-align:center;margin-left:4px">
  <
tr>
    <
th class="bstack" height="300" style="padding:5px;height:300px">
      <
a href="https://www.google.com" style="text-decoration:none;color:black;width:100%" target="_blank">
        <
table class="bpushd" cellpadding="0" cellspacing="0" border="0" width="307" height="300" style="text-align:center;width:307px;height:300px;background-color:#ffffff;border:1px solid #d2d2d2;font-family:Arial">
          <
tbody class="extra" style="border-collapse:collapse">
            <
tr>
              <
td bgcolor="#66299B" height="3"></td>
            </
tr>
            <
tr>
              <
td style="text-align:left;vertical-align:top">
                <
img src="https://d2sagvik43u0ky.cloudfront.net/email/coupon-header-deal.png" />
              </
td>
            </
tr>
            <
tr>
              <
td style="width:100%;text-align:center">
                <
a href="https://www.google.com" style="text-decoration:none;color:black" target="_blank">
                  <
img class="deal_img_border" src="https://d2z2x9m6jf98op.cloudfront.net/offer-deal-large/da/dac13c3d-52c5-47b6-a3d7-bac3aba03509.jpg" style="width:90%!important;text-align:center;vertical-align:middle;Margin:10px" width="270" />
                </
a>
              </
td>
            </
tr>
            <
tr>
              <
td height="60" width="100%" style="width:100%;text-align:left;padding-left:10px;padding-right:10px;vertical-align:bottom;font-weight:600;font-size:17px">
                <
a href="https://www.google.com" style="text-decoration:none;color:black;width:100%" target="_blank">
                  <
span class="iphone_font_size">Brawny Pick-a-Size Paper Towels16XL Rolls</span>
                </
a>
              </
td>
            </
tr>
            <
tr>
              <
td class="iphone_deal_width iphone_cashback_font_size" height=54 width="100%" style="width:100%;height:54px;text-align:left;padding-left:10px;padding-right:10px;vertical-align:bottom;font-weight:200">
                <
div>
                  $
16.52&nbsp;
                  <
s style="font-size:80%;color:#999">$28.99</s>
                </
div>
                <
div style="font-size:80%;color:#999;margin-bottom:10px">
                  <
i>Amazon</i>
                </
div>
              </
td>
            </
tr>
            <
tr>
              <
td>
                <
div>
                  <
table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial;width:100%;padding-top:5px;padding-bottom:10px">
                    <
tr>
                      <
td style="vertical-align:middle;width:50%;padding-left:5px">
                        <
table>
                          <
tr>
                            <
td>
                              <
img src="https://d2z2x9m6jf98op.cloudfront.net/free-shipping.png" />
                            </
td>
                          </
tr>
                        </
table>
                      </
td>
                      <
td style="width:150px;text-align:right;padding-right:10px">
                        <
a href="https://www.google.com" style="text-decoration:none;color:black;width:100%" target="_blank">
                          <
img class="iphone_deal_button" width="150" src="https://d2z2x9m6jf98op.cloudfront.net/email/btn-get-deal3.png">
                        </
a>
                      </
td>
                    </
tr>
                  </
table>
                </
div>
              </
td>
            </
tr>
          </
tbody>
        </
table>
      </
a>
    </
th>
  </
tr>
</
table
Image Attachments
Capture.png

 

marjoleinverheij

Avatar
Jr. Member
Total Posts:  31
Posted: 05 April 2017 01:55 AM
[ # 1 ]

Maybe put an extra wrapper table in there and put the border:1px solid #d2d2d2; on the td instead?