TechQA.

White Lines Issue in Outlook Email Clients - Display Inconsistencies on Zooming and Resizing

630 views Asked by At

Facing white lines issue in certain email clients, such as Outlook, particularly when testing using Litmus on various Outlook and Outlook X-DPI clients. The problem is also observed during local testing, where the lines appear in different locations when zooming in or resizing the window. The white lines appear both horizontally and vertically, but the vertical lines are more prominent.

The email HTML structure uses table tags, with images and text within them. While the issue specifically occurs in Outlook and related clients, other email clients seem to display the content correctly without any white lines. The same email, when opened in web browser using the line in the header "View on web", doesn't show any white lines (no lines on browsers, only specific email clients)

Tested the email on different Outlook versions and resolutions, and the issue remains same.

Screenshot with 2 lines at high zoom on Outlook 2019

Single line at multiple zoom levels on Outlook 2019

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">
  ReadMsgBody {
    width: 100%;
  }

  .ExternalClass {
    width: 100%;
  }

  table {
    border-collapse: collapse;
  }

  .ExternalClass,
  .ExternalClass p,
  .ExternalClass span,
  .ExternalClass font,
  .ExternalClass td,
  .ExternalClass div {
    line-height: 100%;
  }

  body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0 !important;
  }

  p {
    margin: 1em 0;
  }

  table td {
    border-collapse: collapse;
  }

  img {
    outline: 0;
  }

  a img {
    border: none;
  }

  @-ms-viewport {
    width: device-width;
  }
</style>
<style type="text/css">
  @media only screen and (max-width: 480px) {
    .container {
      width: 100% !important;
    }

    .footer {
      width: auto !important;
      margin-left: 0;
    }

    .mobile-hidden {
      display: none !important;
    }

    .logo {
      display: block !important;
      padding: 0 !important;
    }

    img {
      max-width: 100% !important;
      height: auto !important;
      max-height: auto !important;
    }

    .header img {
      max-width: 100% !important;
      height: auto !important;
      max-height: auto !important;
    }

    .photo img {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
    }

    .drop {
      display: block !important;
      width: 100% !important;
      float: left;
      clear: both;
    }

    .footerlogo {
      display: block !important;
      width: 100% !important;
      padding-top: 15px;
      float: left;
      clear: both;
    }

    .nav4,
    .nav5,
    .nav6 {
      display: none !important;
    }

    .tableBlock {
      width: 100% !important;
    }

    .responsive-td {
      width: 100% !important;
      display: block !important;
      padding: 0 !important;
    }

    .fluid,
    .fluid-centered {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .fluid-centered {
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* MOBILE GLOBAL STYLES - DO NOT CHANGE */
    body {
      padding: 0px !important;
      font-size: 16px !important;
      line-height: 150% !important;
    }

    h1 {
      font-size: 22px !important;
      line-height: normal !important;
    }

    h2 {
      font-size: 20px !important;
      line-height: normal !important;
    }

    h3 {
      font-size: 18px !important;
      line-height: normal !important;
    }

    .buttonstyles {
      font-family: arial, helvetica, sans-serif !important;
      font-size: 16px !important;
      color: #FFFFFF !important;
      padding: 10px !important;
    }

    /* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
  }

  @media only screen and (max-width: 640px) {
    .container {
      width: 100% !important;
    }

    .mobile-hidden {
      display: none !important;
    }

    .logo {
      display: block !important;
      padding: 0 !important;
    }

    .photo img {
      width: 100% !important;
      height: auto !important;
    }

    .nav5,
    .nav6 {
      display: none !important;
    }

    .fluid,
    .fluid-centered {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .fluid-centered {
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }
</style>
<!--[if mso]>
      <style type="text/css">
          /* Begin Outlook Font Fix */
          body, table, td {
              font-family: Arial, Helvetica, sans-serif ;
              font-size:16px;
              color:#000000;
              line-height:1;
          }
          /* End Outlook Font Fix */
      </style>
    <![endif]-->



<div style="font-size:0; line-height:0;">
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">

  <tr>
    <td valign="top">
      <!--[if mso]>
                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="templateColumns1"
                        role="presentation" style="width:600px;" width="600">
                <![endif]-->
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="templateColumns1" role="presentation" style="width:600px;" width="600">
        <!-- Footer -->

        <tr>
          <td align="center" class="templateColumnContainer" style="width:100%;" valign="top">
            <table align="center" bgcolor="#c6dccf" border="0" cellpadding="0" cellspacing="0" class="footer-dm" role="presentation" width="100%">

              <tr>
                <td>
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">

                    <tr>
                      <td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tr>
                            <td align="center" style="width:100%;" valign="middle">


                              <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border: 1px solid #c6dccf;">
                                <tr>
                                  <td align="left" height="30" style="font-size:1px;mso-line-height-rule:exactly;line-height:0px;border:0;height:0px;">
                                  </td>
                                </tr>
                                <tr>
                                  <td class="footer" style="color:#1a5252;text-align:center;font-family:Muli, Arial, sans-serif;font-weight:400;font-size:11px;mso-line-height-rule:exactly;line-height:20px;letter-spacing:0.07em;padding: 0px">
                                    <a alias="" conversion="true" data-linkto="https://" href="https://www.test.com" style="color:#1a5252;text-decoration:none;" target="_blank" title="test">Test |
                                      UK: 00000000 | US: 00000000
                                  </a></td>
                                </tr>
                              </table>

                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="templateColumns1" role="presentation" style="width:600px; border-bottom: 1px solid #c6dccf" width="600">
        <!-- Footer -->
        <tr>
          <td align="center" class="templateColumnContainer" style="width:100%;" valign="top">
            <table align="center" bgcolor="#c6dccf" border="0" cellpadding="0" cellspacing="0" class="footer-dm" role="presentation" width="100%">

              <tr>
                <td>
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">

                    <tr>
                      <td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">


                          <tr>
                            <td align="center" valign="middle">
                              <table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">

                                <tr>
                                  <td align="center" class="templateColumnContainer" valign="middle" style="width: 250px!important;">
                                    <!--[if mso]>
                                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                        <tr align="center">
                                          <td align="center" width="90" style="padding: 0;">
                                            <a href="test" target="_blank" title="Test">
                                              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png" alt="test" width="140" height="60" style="border: 0; display: block;">
                                            </a>
                                          </td>
                                        </tr>
                                      </table>
                                    <![endif]-->
                                    <!--[if !mso]>-->
                                    <a href="test" target="_blank" title="test">
                                      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png" alt="test" width="140" height="60" style="border: 0; display: block;">
                                    </a>
                                    <!--<![endif]-->

                                  </td>
                                  <td align="center" class="templateColumnContainer" style="width:50%;" valign="middle">
                                    <!--[if mso]>
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                      <tr>
                                        <td align="center" style="font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; color: #1a5252; text-align: center; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span style="color: #1a5252;">
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td align="center" style="font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; color: #1a5252; text-align: center; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span style="color: #1a5252;">
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td align="center" style="font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; color: #1a5252; text-align: center; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span style="color: #1a5252;">
                                            <a href="" style="color: #1a5252; text-decoration: none;" title="test">test</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td align="center" style="font-family: Verdana, Arial, sans-serif; font-size: 15px; font-weight: 700; color: #1a5252; text-align: center; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span style="color: #1a5252;">
                                            <a href="tel:+0011223456" style="color: #1a5252; text-decoration: none;" title="+0011223456">+0011223456</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td align="left" colspan="3" height="20" style="font-size: 1px; mso-line-height-rule: exactly; line-height: 0px; border: 0; height: 10px;"></td>
                                      </tr>
                                    </table>
                                  <![endif]-->
                                    <!--[if !mso]>-->
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                      <tr>
                                        <td class="footer2" style="color: #1a5252; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span class="contact">
                                            <a href="" style="color: #1a5252; text-decoration: none;" title="Test">Test</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td class="footer2" style="color: #1a5252; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span class="contact">
                                            <a href="" style="color: #1a5252; text-decoration: none;" title="test">test</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td class="footer2" style="color: #1a5252; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: 700; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span class="contact">
                                            <a href="" style="color: #1a5252; text-decoration: none;" title="test">test</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td class="footer2" style="color: #1a5252; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 15px; font-weight: 700; mso-line-height-rule: exactly; line-height: 20px; letter-spacing: 0.07em;">
                                          <span class="contact">
                                            <a href="tel:+0011223456" style="color: #1a5252; text-decoration: none;" title="+0011223456">+0011223456</a>
                                          </span>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td align="left" colspan="3" height="20" style="font-size: 1px; mso-line-height-rule: exactly; line-height: 0px; border: 0; height: 10px;">
                                        </td>
                                      </tr>
                                    </table>
                                    <!--<![endif]-->

                                  </td>
                                  <td align="center" class="templateColumnContainer" style="width:25%;" valign="middle">
                                    <!--[if mso]>
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                    <![endif]-->
                                  </td>
                                </tr>
                                <tr align="center" width="100%">
                                  <!--[if mso]>
                                <td align="center" style="width:90px;max-width:90px;" width="90">
                                <![endif]-->
                                                              <!--[if !mso]>
                                <td align="center" style="width:100px;max-width:100px;" width="90">
                                <![endif]-->
                                </tr>
                              </table>
                              <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:128px;max-width:128px;" width="90">
                                <tr align="center" width="100%">
                                  <!--[if mso]>
                                  <td align="center" style="width:100px;max-width:100px;" width="90">
                                  <![endif]-->
                                                          <!--[if !mso]>
                                  <td align="center" style="width:127px;max-width:127px;" width="90">
                                  <![endif]-->
                                </tr>
                              </table>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    <!--[if mso]>
                    </table>
                    <![endif]-->



                  </table>
                </td>
              </tr>
              <tr>
                <td align="left" class="bit-smaller2" height="15" style="font-size:1px;mso-line-height-rule:exactly;line-height:0px;border:none;height:15px;" valign="top">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Tried changing line heights and image heights to some even digits make the lines disappear(or move them to exterior areas) for some email clients but they start appearing more prominently in other clients.

Existing StackOverflow Question has an answer but that's specifically for when Outlook's zoom is 100% and Windows' display scaling factor is a multiple of 25%.

Expecting the white lines to not appear at any zoom levels (affecting X-DPI clients on Litmus)

Any idea?

email outlook html-email email-client litmus
Original Q&A
1

There are 1 answers

1
Md. Rakibul Islam On

When you assign a background color which is different than the "body" background color you have to assign that background color to almost all the child elements rather than applying it only to the container table/div to avoid that issue on Outlook.

If you don't follow it then in some cases the body background color will overwrite the background color of some empty areas.

Let's give an example with your email: There is a table cell right after "footer2" classes end. That table cell has a height of 10px but it is empty. I understand it is a spacer but this issue occurs in these empty areas. So you have to assign the background color to it as well to fix the issue.

To understand it better you can give a different body background color then you will see it is that color not the "white" color always.

I have coded a lot of html emails for my clients and this kind of Outlook issues are really annoying. But I have successfully overcome from this one :)

Related Questions in EMAIL

Related Questions in OUTLOOK

Related Questions in HTML-EMAIL

Related Questions in EMAIL-CLIENT

Related Questions in LITMUS

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions