Outlook 2013 and HTML emails breaking

HTML & CSS
1

Hi hopefully somebody can tell me what to do before I go insane!

I’ve created a signature in photoshop, sliced it up and placed the HTM file in the signatures area for Outlook 2013. Now when I choose the signature, the tables and images all line up nicely, but if it’s sent to yahoo, gmail, hotmail etc, the design breaks and leaves give white gaps in places.

Here’s the code, if anybody can tell what I need to do, I’d be soooo grateful.

    <style>
table
{
  border-collapse:collapse;
  border-spacing: 0;
  padding:0;
  
}

th, td 
{ 
padding: 0px; 
vertical-align: top;
}

td {
vertical-align:text-top;
}

</style>
<table style="border-collapse: collapse;border-spacing: 0;padding: 0; width:746px;">
	<tr>
		<td width="34" height="93" border="0" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_01.jpg" width="34" height="93" alt="" style="display: block;"></td>
		<td width="11" height="93" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_02.jpg" width="11" height="93" alt="" style="display: block;"></td>
		<td width="183" height="93" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_03.jpg" width="183" height="93" alt="" style="display: block;"></td>
		<td colspan="7" width="518" height="93" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_04.jpg" width="518" height="93" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2" width="228" height="137" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_05.jpg" width="228" height="137" alt="" style="display: block;"></td>
		<td colspan="7" width="518" height="89" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_06.jpg" width="518" height="89" alt="" style="display: block;"></td>
	</tr>
	<tr>
		<td width="235" height="48" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_07.jpg" width="235" height="48" alt="" style="display: block;"></td>
		<td width="53" height="48" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_08.jpg" width="53" height="48" alt="" style="display: block;"></td>
		<td width="46" height="48" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_09.jpg" width="46" height="48" alt="" style="display: block;"></td>
		<td width="37" height="48" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_10.jpg" width="37" height="48" alt="" style="display: block;"></td>
		<td width="44" height="48" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_11.jpg" width="44" height="48" alt="" style="display: block;"></td>
		<td width="42" height="48" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_12.jpg" width="42" height="48" alt="" style="display: block;"></td>
		<td width="61" height="48" style="padding: 0px;vertical-align: top;">
			<img src="http://www.paperplanes.io/signature/images/signature_13.jpg" width="61" height="48" alt="" style="display: block;"></td>
	</tr>
</table>
2

Even simple graphic signatures are a nightmare to get right in the various email clients, so I’m not surprised that this is causing you a lot of grief. I feel your pain, but if I were you, I’d concede defeat and so for a simpler design.

I’d suggest just having a single image for decoration, and placing the social tools as a row of links beneath that. I realise that you and/or your clients will probably baulk at that, but unfortunately, email is still wallowing in the dinosaur age of web design, and needs a good meteor to hit it so that we can all start again. :frowning:

3

It is, indeed, overkill.
And, anyway, if I have my client to show only text, I wouldn’t even see it (even if different versions of Outlook have this thing that they sent you the text only and the HTML version even if you don’t want both of them)

If you really want to do this, use a template created for mailchimp or campaingmonitor or something like that. Those templates are free and have been tested in most e-mail clients, including gmail, yahoo or hotmail, or thunderbird, Eudora and some others.

When you edit the template, don’t do it inside Outlook. Use Notepad++, Sublime or Coda (or whatever text editor you use)

It is easier that Outlook understand what has been created for other than the other way around. Outlook uses Word as HTML editor and it is a whole disaster.

Still, for many reasons including the unnecessary weight that you’re adding to the signature, I would do as @ralphm suggested.

4

Hi,

There are a number of solutions but it does depend on the height of the image and other things. You may need to control line-height on small images, set the vertical-alignment of the image to bottom in case the display property is ignored, add the old align attribute with a value of absbottom… and so on.

You can find a list of all the fixes here and one of them will solve the problem.:slight_smile:

5

Unfortunately, with signatures added via Outlook it’s an ever darker and murkier world that standard HTML emails. :open_mouth: I spent an inordinate amount of time last year trying to get a better result with a similar signature setup, but it was just a waste of time. Outlook injects all kinds of outlandish (non)HTML into the mix, strips out styles and attributes randomly, inserts its own into every cell and element … It’s an absolute nightmare.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.