Html email signature in outlook is showing a lot of white spaces and gaps

Question

0.00/5 (No votes)

See more:

hey guys,
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.

What I have tried:

HTML

<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>

Posted 21-Oct-21 1:00am

yasmine chouillaj

Add a Solution

Comments

RedDk 21-Oct-21 15:39pm

I see no whitespace ...

yasmine chouillaj 26-Oct-21 13:04pm

try adding it on outlook as a signature.

w3collective 26-Oct-21 3:31am

It may be because the spacer.gif isn't hosted on a server and the way Outlook handles images it cant find is different to other browsers?

yasmine chouillaj 26-Oct-21 13:05pm

no it's not that, i tried another one without any gif, and still the same problem..

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Html email signature in outlook is showing a lot of white spaces and gaps

Add your solution here

Preview 0

Html email signature in outlook is showing a lot of white spaces and gaps

Add your solution here

Preview 0

Existing Members

...or Join us