0

I recently made an email signature using photoshop (slicing method), it's working fine on Gmail and even in my server (Roundcube) except for outlook, it's showing a white space between every slice.. how can I fix that please, it's been a week now since I'm trying to fix this.. I need your help...

some people suggested that I need to remove white space between every td I also tried the display: block; tried even to make my signature smaller tried changing the background and still nothing.

I really need ur help with this..

I attached down below, the HTML code I'm using for my signature.

thanks in advance.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<!-- Paste Code Under This Line
_________________________________________________________________________________ -->

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (signature temlate testing.psd) -->
<table id="Tableau_01" width="701" height="234" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2" rowspan="2">
            <img src="https://i.postimg.cc/Mp629Dz4/mag-01.png" width="262" height="100" alt="" border="0" style="display:block;"></td>
        <td colspan="2" rowspan="2">
            <img src="https://i.postimg.cc/g07Ckb3F/mag-02.png" width="243" height="100" alt="" border="0" style="display:block;"></td>
        <td colspan="2">
            <a href="https://www.procnnct.com"><img src="https://i.postimg.cc/yYKwNP3d/mag-03.png" width="195" height="39" alt="" border="0" style="display:block;"></a></td>
        <td>
            <img src="spacer.gif" width="1" height="39" alt="" border="0" style="display:block;"></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="https://i.postimg.cc/Zq0kS5Bx/mag-04.png" width="195" height="80" alt="" border="0" style="display:block;"></td>
        <td>
            <img src="spacer.gif" width="1" height="61" alt="" border="0" style="display:block;"></td>
    </tr>
    <tr>
        <td rowspan="7">
            <img src="https://i.postimg.cc/7YNjJ2SN/mag-05.png" width="261" height="133" alt="" border="0" style="display:block;"></td>
        <td colspan="3" rowspan="2">
            <a href="tel:+971 50 292 7751"><img src="https://i.postimg.cc/vB6p42v1/mag-06.png" width="244" height="20" alt="" border="0" style="display:block;"></a></td>
        <td>
            <img src="spacer.gif" width="1" height="19" alt="" border="0" style="display:block;"></td>
    </tr>
    <tr>
        <td>
            <img src="https://i.postimg.cc/gjF18yMg/mag-07.png" width="94" height="1" alt="" border="0" style="display:block;"></td>
        <td rowspan="4">
            <a href="https://www.linkedin.com/company/procnnct/?viewAsMember=true"><img src="https://i.postimg.cc/zvC6jL68/mag-08.png" width="101" height="52" alt="" border="0" style="display:block;"></a></td>
        <td>
            <img src="spacer.gif" width="1" height="1" alt="" border="0" style="display:block;"></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="https://i.postimg.cc/wxLCHPvZ/mag-09.png" width="241" height="6" alt="" border="0" style="display:block;"></td>
        <td colspan="2" rowspan="3">
            <a href="https://www.youtube.com/channel/UCP5EMTdCqn86Uak4Z0wbnZQ"><img src="https://i.postimg.cc/mg2JYgwW/mag-10.png" width="97" height="51" alt="" border="0" style="display:block;"></a></td>
        <td>
            <img src="spacer.gif" width="1" height="6" alt="" border="0" style="display:block;"></td>
    </tr>
    <tr>
        <td colspan="2">
            <a href="mailto:Magdy.hafez@procnnct.com"><img src="https://i.postimg.cc/x1x7tVxJ/mag-11.png" width="241" height="24" alt="" border="0" style="display:block;"></a></td>
        <td>
            <img src="spacer.gif" width="1" height="24" alt="" border="0" style="display:block;"></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="https://i.postimg.cc/VNJhhZp7/mag-12.png" width="241" height="33" alt="" border="0" style="display:block;"></td>
        <td>
            <img src="spacer.gif" width="1" height="21" alt="" border="0" style="display:block;"></td>
    </tr>
    <tr>
        <td>
            <img src="https://i.postimg.cc/43j0RbTX/mag-13.png" width="3" height="12" alt="" border="0" style="display:block;"></td>
        <td colspan="2" rowspan="2">
            <img src="https://i.postimg.cc/C1DQhBFk/mag-14.png" width="195" height="62" alt="" border="0" style="display:block;"></td>
        <td>
            <img src="spacer.gif" width="1" height="12" alt="" border="0" style="display:block;"></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="https://i.postimg.cc/j2bkLx59/mag-15.png" width="244" height="50" alt="" border="0" style="display:block;"></td>
        <td>
            <img src="spacer.gif" width="1" height="50" alt="" border="0" style="display:block;"></td>
    </tr>
    <tr>
        <td>
            <img src="spacer.gif" width="261" height="1" alt="" border="0" style="display:block;"></td>
        <td>
            <img src="spacer.gif" width="1" height="1" alt="" border="0" style="display:block;"></td>
        <td>
            <img src="spacer.gif" width="240" height="1" alt="" border="0" style="display:block;"></td>
        <td>
            <img src="spacer.gif" width="3" height="1" alt="" border="0" style="display:block;"></td>
        <td>
            <img src="spacer.gif" width="94" height="1" alt="" border="0" style="display:block;"></td>
        <td>
            <img src="spacer.gif" width="101" height="1" alt="" border="0" style="display:block;"></td>
        <td></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>

<!-- Keep Pasted Code Above This Line!
_________________________________________________________________________________ -->
</html>
Syfer
  • 4,262
  • 3
  • 20
  • 37
yasmine chouillaj
  • 9
  • 2
  • The image looks fine, apart from a pixel sliced of the bottom of the phone dot. Have a look [here](https://stackoverflow.com/questions/36973907/spacing-issue-in-html-email-with-outlook) and [here](https://stackoverflow.com/questions/4890876/gmail-displaying-gaps-between-images) to see if it helps. – Ghoul Fool Oct 21 '21 at 12:21
  • @Rob what do you mean ? i don't get it .. could you explain more, please. – yasmine chouillaj Oct 22 '21 at 13:32
  • @GhoulFool well yeah it looks fine on almost every platform other than outlook.. that's my problem.. i don't know how to solve it .. – yasmine chouillaj Oct 22 '21 at 14:08
  • Microsoft Outlook is famous for its historically poor handling of HTML. There are many resources that describe things you can do about it, such as [this one](https://medium.com/email-design/outlook-rendering-issues-5-tips-to-ensure-your-emails-display-properly-9520b2456166) (and links at the bottom there). – Moshe Katz Oct 25 '21 at 01:52
  • 1
    Try ``. There are sometimes defaults that you need to reset. But there are also known issues with colspan and rowspan: you can eliminate their use by nesting the table. However, you also want to consider what it will look like on mobile phones (about 300px wide), so I suggest a completely different approach. – Nathan Oct 25 '21 at 02:34

0 Answers0