0

I try to create a template email for outlook, and I have a problem.

The table they use to create the email has a plus margin/padding of 1 px, as in the picture + does not recognize the font.

https://i.stack.imgur.com/mBMMU.jpg

https://i.stack.imgur.com/HAOug.jpg

What I want: https://i.stack.imgur.com/Ohvw6.jpg

I try with padding: 0, margin: -1, table-layout: fixed and other thinks.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Single-Column Responsive Email Template</title>
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <style>
  @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

 table{
     border-spacing: 0;
     border: none;
    }
 td{
 margin: 0px;
    
     border: none;
 
 }
 tr{
  margin: 0px;
  border: none;
 
 }
 img{
  display:block;
 }
 p{
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #1f2327;
 }
  </style>
</head>
 
<body>
 
<table border="0" style="height: 790px; width: 610px; border-collapse: collapse; " cellpadding="0" cellspacing="0" >
  <tr>
   <td width="90" style="text-align: right; width: 90px; height: 781px; padding:0; ">
    <img src="https://i.imgur.com/MLPTttG.png">
   </td>
   <td>
    <table width="527" border="0" cellpadding="0" cellspacing="0">
     <tr>
      <td width="527" style=" width: 527px; height: 19px;">
      <img src="https://i.imgur.com/wGaQ4Vf.png" style="width: 100%;">
      </td>
     </tr>
     <tr>
      <td style="height: 738px; margin: 20px;">
       a
      </td>
     </tr>
     <tr>
      <td style="width: 527px; height: 24px; background-color: #007034;">
       <img src="https://i.imgur.com/vrb1QrE.png">
      </td>
     </tr>
    </table>
   </td>
   <td style="width: 37px; height: 781px;">
    <img src="https://i.imgur.com/nVuB7Wk.png">
   </td>
  </tr>
</table>
</body>
</html>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
  • What exactly is the result you want? – Maharkus Nov 02 '17 at 12:47
  • @maharkus https://imgur.com/kQIrH2T –  Nov 02 '17 at 12:49
  • https://www.campaignmonitor.com/css/text-fonts/woff2/ custom fonts are not widely supported in e-mails. People mostly resort to using images for custom fonts. As for the pixel gap, I don't really know, but it probably also has something to do with the horrendous CSS support in e-mail-clients. – Maharkus Nov 02 '17 at 12:55
  • pixel gap for Outlook can be solved by collapsing the `table` and `td` borders. – scoopzilla Nov 02 '17 at 18:48
  • `table, td { border-collapse: collapse !important;}` – scoopzilla Nov 02 '17 at 18:49

1 Answers1

0

First; add some conditionals in your CSS

 #outlook a{
        padding:0;
    }
    .ReadMsgBody{
        width:100%;
    }
    body{
        width:100% !important;
        min-width:100%;
        -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
        -webkit-font-smoothing: antialiased;
    }
    v*{
        behavior:url(#default#VML);
        display:inline-block;
    }
    .ExternalClass{
        width:100%;
    }
    td{
        border-collapse: collapse!important;
    }
    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div{
        line-height:100%;
    }
    a img{
        border:none;
    }
    a {
        text-decoration:none !important;
    }
    img{
        display:block;
        outline:none;
        text-decoration:none;
        border:none; 
         -ms-interpolation-mode: bicubic;
    }
    table{
        border-spacing:0;
        border-collapse: collapse !important;
        mso-table-lspace:0pt;
        mso-table-rspace:0pt;
    }

These are pretty basic, and they cover a wide range of outlook issues, including table and td padding issues.

The second thing I'd like to address is custom fonts. Custom font are going to be PRETTY hard to pull off, especially for Outlook. You are genuinely better off sticking to universal font stacks. If you are dead set on using a google web font be warned, it will not look or act or possible even appear the same way in Outlook.

edit: Also I noticed your DOCTYPE is strict. I'd recommend Transitional:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="format-detection" content="date=no"/>
  <meta name="format-detection" content="telephone=no"/>
     <!--[if !mso]><!-- -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <!--<![endif]-->

This header portion has been very good to me over the last few years.

scoopzilla
  • 887
  • 5
  • 15