Html Question posted in
Some basic documentation can be found here.

HTML Clickable Signature not displaying correctly in Outlook

I am trying to make a clickable html signature in photoshop and used the slice tool to slice the parts that needs to be clickable.

It displays correctly in the browser and gmail but in outlook it makes these transparent lines at some places where the slices were made.

I have tried searching and adding little bits to the code that people say are needed but with no luck can anyone please provide a solution

enter image description here

Source Code

<html>
  <head>
    <title>Untitled-1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <style media="screen" type="text/css">
      td{line-height:0; font-size: 0.0em; }
      img{display: block; float: left; padding: 0} align: absbottom; align: texttop;; }
    </style>
  </head>
  <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (MKCTV_Logo_Source_File.png) -->
    <table id="Table_01" style="border-collapse: collapse" width="650" height="325" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="7">
          <img src="https://i.postimg.cc/C599BwcG/100-01.png" width="650" height="38" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td rowspan="6">
          <img src="https://i.postimg.cc/SQPBtGmn/100-02.png" width="10" height="287" alt="" style="display: block" />
        </td>
        <td rowspan="5">
          <img src="https://i.postimg.cc/wj8S9TyH/100-03.png" width="240" height="236" alt="" style="display: block" />
        </td>
        <td colspan="5">
          <img src="https://i.postimg.cc/65GksGQY/100-04.png" width="400" height="74" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <img src="https://i.postimg.cc/Sx6HRFC9/100-05.png" width="311" height="46" alt="" style="display: block" />
        </td>
        <td rowspan="5">
          <img src="https://i.postimg.cc/1zy2NCrj/100-06.png" width="89" height="213" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <img src="https://i.postimg.cc/ZqjgP8fK/100-07.png" width="311" height="45" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <img src="https://i.postimg.cc/Y99PdvVN/100-08.png" width="311" height="38" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <img src="https://i.postimg.cc/sXNNqVdk/100-09.png" width="311" height="33" alt="" style="display: block" />
        </td>
      </tr>
      <tr>
        <td>
          <img src="https://i.postimg.cc/L5gbMrmn/100-10.png" width="240" height="51" alt="" style="display: block" />
        </td>
        <td>
          <img src="https://i.postimg.cc/vDRS83mX/100-11.png" width="52" height="51" alt="" style="display: block" />
        </td>
        <td>
          <img src="https://i.postimg.cc/667W3q3G/100-12.png" width="39" height="51" alt="" style="display: block" />
        </td>
        <td>
          <img src="https://i.postimg.cc/T2ZRWxLN/100-13.png" width="39" height="51" alt="" style="display: block" />
        </td>
        <td>
          <img src="https://i.postimg.cc/tCW93cFq/100-14.png" width="181" height="51" alt="" style="display: block" />
        </td>
      </tr>
    </table>
    <!-- End Save for Web Slices -->
  </body>
</html>
Tags:

2

Answers


  1. 0

    The problem comes from the following line in your <style> tag:

    td{line-height:0; font-size: 0em; }

    And more specifically, it comes from the line-height:0;. This should not be needed anyway so I think you can safely remove it altogether.

    Please note that there’s also a syntax error in the second line of your style tag (padding: 0} align: absbottom; align: texttop;; }).

    Login or Signup to reply.
  2. 0

    Simplify it. Outlook Windows desktop doesn’t always play well with colspans and rowspans. Furthermore, it’s not going to work well on mobiles, which have about half the space.

    Try this layout, which you can code yourself:

    +-----------+--------------------------+----------------+
| <img>     | <table>                  | <img>          |
|           | <tr><td>...</td></tr>    |                |
|           | <tr><td>...</td></tr>    |                |
|           | <tr><td>...</td></tr>    |                |
|           | </table>                 |                |
+-----------+--------------------------+----------------+

    So this is one table with three columns, in the first column, the left image, in the second column another table with as many rows as needed (but only ONE td in each), and in the third column, the little swoosh at the top.

    Use <td style="vertical-align:top"> to move images to top.

    Cut each icon out as it’s own separate image, and then you can link them individually. You can just have them each one after the other separate by a space: <img src="..." width="x" alt="LinkedIn" /> <img src="..." width="x" alt="Facebook" /> or add more space by using a non-breaking space: &nbsp; <– three spaces.

    On mobile, the central column will squeeze, although you might like to allow the left and right to get smaller too, e.g. for the left <img src="..." width="150" height="250" style="max-width:100%;height:auto;min-width:75px;" alt="" />.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search