title: How to eliminate white lines in HTML emails mostly seen on iPhone
body: <p>I'm trying to get rid of these white lines that iPhone users are seeing in these emails. This can be reproduced by viewing the email in chrome when re-sizing the browser. Whether the white lines appear or not depends on the size of the window. It only happens to the image slices of the left-most data-cell in a table-row. </p>
  
  <p>Here is the code</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta http-equiv="Content-Type" content="text/html charset=UTF-8" /&gt;
  
      &lt;title&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
          /***START, CSS targeting client bugs***/
  
          body {
              -webkit-text-size-adjust: none;
              -ms-text-size-adjust: none;
              /* Prevents Webkit and Windows Mobile platforms from changing default font sizes. */
          }
  
          .ExternalClass {
              width: 100%;
              /* Forces Hotmail to display emails at full width */
          }
  
          .ExternalClass,
          .ExternalClass p,
          .ExternalClass span,
          .ExternalClass font,
          .ExternalClass td,
          .ExternalClass div {
              line-height: 100%;
              /* Forces Hotmail to display normal line spacing */
          }
  
          body {
              margin: 0;
              padding: 0;
              /* Resets all body margins and padding to 0 for good measure */
          }
  
          p {
              margin: 1em 0;
          }
  
          table td {
              border-collapse: collapse;
              /*This resolves the Outlook 07, 10, and Gmail td padding issue */
          }
  
          @-ms-viewport {
              width: device-width;
          }
          /***END, CSS targeting client bugs***/
          /***START, Reset styles***/
  
          p {
              margin: 0;
              padding: 0;
              margin-bottom: 0;
          }
  
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
              color: black;
              line-height: 100%;
          }
          /***END, Reset styles***/
  
          @media only screen and (max-width: 480px) {
              a[href^="tel"],
              a[href^="sms"] {
                  text-decoration: underline;
                  color: #0063ba;
                  pointer-events: none;
                  cursor: default;
              }
              .mobile_link a[href^="tel"],
              .mobile_link a[href^="sms"] {
                  text-decoration: underline;
                  color: #0063ba !important;
                  pointer-events: auto;
                  cursor: default;
              }
              body {
                  overflow-x: hidden !important;
                  text-align: center !important;
                  background-color: #ffffff !important;
              }
              body[yahoo] .container {
                  width: 320px !important;
                  display: block !important;
              }
              body[yahoo] .drop {
                  width: 100% !important;
                  display: block !important;
                  text-align: center !important;
                  padding: 2px 0 !important;
              }
              body[yahoo] .hide_this {
                  display: none !important;
              }
              body[yahoo] .respond_to_width {
                  width: 100% !important;
                  display: block !important;
              }
              body[yahoo] .mobile_image {
                  width: 100% !important;
                  height: auto !important;
              }
              body[yahoo] .pushto100 {
                  width: 100% !important;
              }
              body[yahoo] .centerthis {
                  text-align: center !important;
                  display: inline-block !important;
              }
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;custom name="opencounter" type="tracking"&gt;
  
      &lt;body style="margin: 0px; padding:0px; -webkit-text-size-adjust:none; -ms-text-size-adjust: none;" yahoo="fix"&gt;
          &lt;!--CENTER EMAIL_start--&gt;
          &lt;table cellpadding="0" cellspacing="0" border="0" width="100%" class="respond_to_width"&gt;
              &lt;tr&gt;
                  &lt;td align="center" valign="top"&gt;
                      &lt;table cellpadding="0" cellspacing="0" border="0"&gt;
                          &lt;tr&gt;
                              &lt;td align="left" valign="top"&gt;
                                  &lt;table cellpadding="0" cellspacing="0" border="0" width="100%"&gt;
                                      &lt;tr&gt;
                                          &lt;td align="left" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#333333;padding:10px 0;"&gt;
                                              &lt;a href="%%view_email_url%%" alias="VAWP" target="_blank" style="text-decoration: underline;color:#333333;"&gt;Click to view this message in a browser&lt;/a&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td align="left" valign="top"&gt;
                                  &lt;table cellpadding="0" cellspacing="0" border="0" width="640" class="respond_to_width"&gt;
                                      &lt;tr&gt;
                                          &lt;td colspan="2" align="left" valign="top"&gt;
                                              &lt;a conversion="TRUE" alias="body_header" href="https://www.google.com"&gt;&lt;img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/84aa6e6.png" width="640" height="143" alt="email header" title="start shopping"&gt;&lt;/a&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td align="left" valign="top"&gt;
                                              &lt;a conversion="TRUE" alias="body_zone1" href="https://www.google.com"&gt;&lt;img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/87ba827.png" width="321" height="192" alt="clickzone 1" title="shop Halloween costmes"&gt;&lt;/a&gt;
                                          &lt;/td&gt;
                                          &lt;td align="left" valign="top"&gt;
                                              &lt;a conversion="TRUE" alias="body_zone2" href="https://www.google.com"&gt;&lt;img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8b26eb0.png" width="319" height="192" alt="clickzone 2" title="shop Halloween costmes"&gt;&lt;/a&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td align="left" valign="top"&gt;
                                              &lt;a conversion="TRUE" alias="body_zone3" href="https://www.google.com"&gt;&lt;img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8c23711.png" width="321" height="159" alt="clickzone 3"&gt;&lt;/a&gt;
                                          &lt;/td&gt;
                                          &lt;td align="left" valign="top"&gt;
                                              &lt;a conversion="TRUE" alias="body_zone4" href="https://www.google.com"&gt;&lt;img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8d3de4a.png" width="319" height="159" alt="clickzone 4" title="shop Halloween costmes"&gt;&lt;/a&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td align="left" valign="top"&gt;
                                              &lt;a conversion="TRUE" alias="body_zone5" href="https://www.google.com"&gt;&lt;img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8e4baa8.png" width="321" height="191" alt="clickzone 5" title="shop Halloween costmes"&gt;&lt;/a&gt;
                                          &lt;/td&gt;
                                          &lt;td align="left" valign="top"&gt;
                                              &lt;a conversion="TRUE" alias="body_zone6" href="https://www.google.com"&gt;&lt;img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9053862.png" width="319" height="191" alt="clickzone 6" title="shop Halloween costmes"&gt;&lt;/a&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td colspan="2" align="left" valign="top"&gt;
                                              &lt;a conversion="TRUE" alias="body_footer" href="https://www.google.com"&gt;&lt;img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9226e55.png" width="640" height="181" alt="email footer" title="contact us, etc"&gt;&lt;/a&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td align="left" valign="top" style="font-size:0%;padding:10px 0 0 0;display:none;"&gt;
                                  %%=ContentAreaByName("Divider_Green")=%%
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;!--SOCIAL BUTTONS/--&gt;
                          &lt;tr&gt;
                              &lt;td align="center" valign="top"&gt;
                                  &lt;table cellpadding="0" cellspacing="0" border="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td align="left" valign="top"&gt;
                                              &lt;a href="https://www.facebook.com/" alias="Facebook" target="_blank"&gt; FaceBook &lt;/a&gt;
                                          &lt;/td&gt;
                                          &lt;td align="left" valign="top"&gt;&amp;nbsp;|&amp;nbsp;&lt;/td&gt;
                                          &lt;td align="left" valign="top"&gt;
                                              &lt;a href="https://plus.google.com/" alias="Google+" target="_blank"&gt;
                                                                      Google+
                                                                  &lt;/a&gt;
                                          &lt;/td&gt;
                                          &lt;td align="left" valign="top"&gt;&amp;nbsp;|&amp;nbsp;&lt;/td&gt;
                                          &lt;td align="left" valign="top"&gt;
                                              &lt;a href="https://instagram.com/" alias="Instagram" target="_blank"&gt;
                                                                      InstaGram
                                                                  &lt;/a&gt;
                                          &lt;/td&gt;
                                          &lt;td align="left" valign="top"&gt;&amp;nbsp;|&amp;nbsp;&lt;/td&gt;
                                          &lt;td align="left" valign="top"&gt;
                                              &lt;a href="http://www.pinterest.com/" alias="Pinterest" target="_blank"&gt;
                                                                      Pintrest
                                                                  &lt;/a&gt;
                                          &lt;/td&gt;
                                          &lt;td align="left" valign="top"&gt;&amp;nbsp;|&amp;nbsp;&lt;/td&gt;
                                          &lt;td align="left" valign="top"&gt;
                                              &lt;a href="https://twitter.com/" alias="Twitter" target="_blank"&gt;
                                                                      Twitter
                                                                  &lt;/a&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;!--EMAIL, PHONE NUMBER/--&gt;
  
                          &lt;tr&gt;
  
                              &lt;td align="center" valign="top"&gt;
                                  &lt;table cellpadding="0" cellspacing="0" border="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td class="drop" align="left" valign="top" style="font-size:14px;font-family:arial,sans-serif;color:#6ebe43;padding:0 20px 0 0;"&gt;
                                              &lt;a href="mailto:customerservice@chasing-fireflies.com" alias="customerservice@chasing-fireflies.com" target="_blank" style="text-decoration: none;color:#88ab00;"&gt;customerservice@arbitraryLink.com &lt;/a&gt;
                                              &lt;span style="font-size:14px;font-family:arial,sans-serif;color:#000001"&gt;
                                          | 1.888.777.6666
                                      &lt;/span&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td align="center" valign="top"&gt;
                                  &lt;table cellpadding="0" cellspacing="0" border="0" width="100%"&gt;
                                      &lt;tr&gt;
                                          &lt;td class="drop" align="center" valign="middle"&gt;
                                              &lt;!--CTA BUTTON/--&gt;
                                              &lt;br&gt;
                                              &lt;br&gt;
                                              &lt;table cellpadding="0" cellspacing="0" border="0" class="pushto100"&gt;
                                                  &lt;tr&gt;
                                                      &lt;td align="left" valign="middle" style="padding:0 10px"&gt;
                                                          &lt;table cellpadding="0" cellspacing="0" border="0" width="100%"&gt;
                                                              &lt;tr&gt;
                                                                  &lt;td align="center" valign="top" style="font-size:12px;color:#88ab00;font-family:arial,sans-serif;font-weight:bold;"&gt;
  
                                                                      &lt;span style="text-decoration: none;color:#88ab00;"&gt;
                                                                      &lt;a href="https://www.google.com" alias="signUpButton" target="_blank" style="text-decoration: none;color:#88ab00;"&gt;sign up for emails&lt;/a&gt;&lt;/span&gt;
                                                                  &lt;/td&gt;
                                                              &lt;/tr&gt;
                                                          &lt;/table&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/table&gt;
                                              &lt;!--&lt;br&gt;&lt;br&gt;--&gt;
                                          &lt;/td&gt;
  
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td width="640" align="center" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#6ebe43;padding:16px 4px;"&gt;
                                  &lt;span style="color:#333333; width:640px;"&gt; 
                             *Terms and conditions apply
                               &lt;br&gt;&lt;br&gt;
                            This email was sent by: %%member_busname%%, %%member_addr%% %%member_city%%, %%member_state%% %%member_postalcode%% %%member_country%%&lt;/span&gt;
                                  &lt;br&gt;
                                  &lt;span style="color:#333333;"&gt;
                              This email was sent to: &lt;strong&gt;%%emailaddr%%&lt;/strong&gt;&lt;/span&gt;&lt;span style="color:#333333;"&gt;. We respect your right to privacy -&lt;/span&gt; &lt;a href="http://www.chasing-fireflies.com/full-privacy/content" alias="PRIVACY POLICY" target="_blank" style="text-decoration: none;color:#88ab00;"&gt;privacy policy&lt;/a&gt;
                                  &lt;br&gt;
                                  &lt;br&gt;
                                  &lt;a href="%%unsub_center_url%%" alias="One-Click Unsubscribe" target="_blank" style="text-decoration: none;color:#88ab00;"&gt;One-Click Unsubscribe&lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;!--CENTER EMAIL_end--&gt;
          %%[ var @additionalattribute1, @additionalattribute2, @additionalattribute3, @additionalattribute4 Set @additionalattribute1 = __AdditionalEmailAttribute1 Set @additionalattribute2 = __AdditionalEmailAttribute2 Set @additionalattribute3 = __AdditionalEmailAttribute3 Set @additionalattribute4 = __AdditionalEmailAttribute4 ]%%
          &lt;img src="http://track.securedopen-q.com/?sv_cid=0215_01811&amp;sv_emopen=true&amp;sv_svem=%%emailaddr%%&amp;cm_source=tracking_pixel_stuff" height="1" width="1" /&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>You can see the white lines in my jFiddle when resizing the browser in chrome. <a href="http://jsfiddle.net/stormbloom/4s0sqkbb/" rel="nofollow">http://jsfiddle.net/stormbloom/4s0sqkbb/</a></p>
  
  <p>Please ignore the AMP script unless you think in could be causing rendering problems (which I doubt). I just left it in there so you can see what the entirety of the code looks like.</p>