So, I'm doing an html mail for a company, and am having some trouble with Outlook 2003.
If I inject the html into gmail with the element inspector, or insert the html with thunderbird, I have no trouble at all. Everything is sent correctly, and everything is read correctly. Tested the html on many html email checkers and get 100% compatibility. The client is using Outlook 2003 to edit the content and send the mail.
This is the code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Agenda</title>
</head>
<body style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td width="200" align="center" valign="top" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><table border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td width="200" height="1600"><img src="http://www.oa.pt/Conteudos/Media/file.aspx?ida=132727" alt="Header" width="200" height="1600" style="display: block" /></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#b7ae9d"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#89181a"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#b7ae9d"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#89181a"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#b7ae9d"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#89181a"></td>
</tr>
</table></td>
<td width="600" align="center" valign="top" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="600" height="200"><img src="http://www.oa.pt/Conteudos/Media/file.aspx?ida=132725" alt="Header" width="600" height="200" style="display: block" /></td>
</tr>
<tr>
<td height="618" align="center" valign="top" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="600" height="30" align="center" valign="top" bgcolor="#FFFFFF" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><span class="cinza centrado" style="color: #8A867A;display: block;text-align: center">não consegue visualizar correctamente? clique <a href="ficheiro_impressao.pdf" target="_blank" style="color: #8A867A;text-decoration: none">aqui</a> para uma versão de impressão</span></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><table width="500" border="0" align="center" cellpadding="0" cellspacing="2">
<tr>
<td width="50%" align="left" valign="top" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><table width="100" border="0" cellpadding="0" cellspacing="0" class="agenda">
<tr>
<th style="font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;background: #8A867A;font-size: 10px;padding: 5px;color: white;text-align: center">Janeiro 2014</th>
</tr>
<tr>
<td style="font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;font-size: 48px;color: #8A867A;line-height: 48px;border: 1px solid #8A867A;padding: 2px;text-align: center">31</td>
</tr>
</table>
<br />
Conferência
<h2 class="vermelho" style="color: #89181A;font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;display: block;font-size: 20px;font-style: normal;line-height: normal;font-weight: normal;font-variant: normal;padding: 0;margin: 5px 0">Acidente de trabalho - Acidente in Itinere - Descaracterização e Consequências</h2>
<h4 style="font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;display: block;font-size: 12px;font-style: normal;line-height: normal;font-weight: bold;font-variant: normal;padding: 0;margin: 4px 0">Orador: Professor Doutor Júlio Gomes, Docente da Faculdade de Direito da Universidade Católica do Porto</h4>
<p><span class="vermelho" style="color: #89181A">Horário: </span>18h30m<br />
<span class="vermelho" style="color: #89181A">Local: </span> Auditório do ISMAI<br />
<span class="vermelho" style="color: #89181A">Organização: </span> Delegação da Maia da Ordem dos <br />
Advogados e a Associação Jurídica<br />
da Maia<br />
<span class="vermelho" style="color: #89181A">Informações </span><br />
Delegação da Maia<br />
<span class="vermelho" style="color: #89181A">E-mail: </span> maia@del.oa.pt</p></td>
<td align="left" valign="top" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><table width="100" border="0" cellpadding="0" cellspacing="0" class="agenda">
<tr>
<th style="font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;background: #8A867A;font-size: 10px;padding: 5px;color: white;text-align: center">Fevereiro 2014</th>
</tr>
<tr>
<td style="font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;font-size: 48px;color: #8A867A;line-height: 48px;border: 1px solid #8A867A;padding: 2px;text-align: center">04</td>
</tr>
</table>
<br />
Ciclo de Conferências
<h2 class="vermelho" style="color: #89181A;font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;display: block;font-size: 20px;font-style: normal;line-height: normal;font-weight: normal;font-variant: normal;padding: 0;margin: 5px 0">As recentes alterações ao código de trabalho</h2>
<h4 style="font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;display: block;font-size: 12px;font-style: normal;line-height: normal;font-weight: bold;font-variant: normal;padding: 0;margin: 4px 0"><strong>A GTI - Gestão, Tecnologia e Inovação S.A vai realizar um Ciclo de Conferên-cias subordinado ao tema "As Recentes Alterações ao Código do Trabalho” onde serão oradoras a Exma. Senhora Dra. Suzana Fernandes da Costa e a Exma. Senhora Dra. Conceição Soares, Advogadas da SFC Advogados.</strong></h4>
<p><span class="vermelho" style="color: #89181A">Programa</span><br />
Carlos Vasconcelos<br />
Vogal-Secretário do Conselho Distrital</p></td>
</tr>
</table>
<p> </p>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><h2 class="cinza margem-azul" style="color: #8A867A;border-top: 1px solid #A1C1BE;border-bottom: 1px solid #A1C1BE;font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;display: block;font-size: 20px;font-style: normal;line-height: normal;font-weight: normal;font-variant: normal;padding: 0;margin: 5px 0">Divulgação Institucional</h2>
<h2 class="vermelho" style="color: #89181A;font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;display: block;font-size: 20px;font-style: normal;line-height: normal;font-weight: normal;font-variant: normal;padding: 0;margin: 5px 0">Coral de S. Ivo - Inscrições abertas</h2>
<h4 style="font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;display: block;font-size: 12px;font-style: normal;line-height: normal;font-weight: bold;font-variant: normal;padding: 0;margin: 4px 0">Coro do Conselho Distrital da Ordem dos Advogados do Porto</h4>
<br />
<span class="vermelho" style="color: #89181A">Ensaios: </span>Quartas-feiras das 21h30h às 23:00h, na Cave das Artes, sita na Praça da R<br />
210,4050 Porto<br />
<span class="vermelho" style="color: #89181A">Contactos:</span> 917665251 (Dr.ª. Ângela Rodrigues) e 934245497 (Dr. Marcelo Santos)<br />
Divulgação Institucional
<p> </p></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#A0C1BD" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><table width="600" height="99" border="0" cellpadding="0" cellspacing="0" bgcolor="#A0C1BD" id="Table_01">
<tr>
<td style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><img src="http://www.oa.pt/Conteudos/Media/file.aspx?ida=132762" width="156" height="99" alt="Footer_01" style="display: block" /></td>
<td width="200" height="99" align="left" valign="middle" bgcolor="#A0C1BD" class="branco reduzido" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 9px;color: white;line-height: 14px">Está a receber a nossa publicação porque está ativo na lista de subscritores da Ordem dos Advogados. Para mais informações contacte <a href="mailto:comunicacao@cdp.oa.pt" target="_blank" class="branco" style="color: white;text-decoration: none">comunicacao@cdp.oa.pt</a></td>
<td style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><img src="http://www.oa.pt/Conteudos/Media/file.aspx?ida=132763" width="162" height="99" alt="Footer_02" style="display: block" /></td>
<td width="82" height="99" align="left" valign="middle" bgcolor="#A0C1BD" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><h3 class="branco" style="color: white;font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;display: block;font-size: 12px;font-style: normal;line-height: normal;font-weight: bold;font-variant: normal;padding: 0;margin: 4px 0;text-transform: uppercase"><a href="https://www.facebook.com/cdporto.oa" target="_blank" class="branco" style="color: white;text-decoration: none">Facebook</a></h3>
<h3 class="branco" style="color: white;font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;display: block;font-size: 12px;font-style: normal;line-height: normal;font-weight: bold;font-variant: normal;padding: 0;margin: 4px 0;text-transform: uppercase"><a href="http://www.oa.pt/CD/default.aspx?sidc=31690" target="_blank" class="branco" style="color: white;text-decoration: none">Website</a></h3></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="200" align="center" valign="top" style="font-family: Verdana, Helvetica, Arial, sans-serif;font-size: 11px;color: #585858;line-height: 14px"><table border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td width="200" height="1600"><img src="http://www.oa.pt/Conteudos/Media/file.aspx?ida=132726" alt="Right" width="200" height="1600" style="display: block" /></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#b7ae9d"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#b7ae9d"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#b7ae9d"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#b7ae9d"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="200" height="200" bgcolor="#b7ae9d"></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Check http://jsfiddle.net/uMwHa/ for a view of it rendered correctly.
The columns are a LOT taller than the current content to allow for longer messages (the client actually asked for it), and uses table cells to mimic the colour pattern below the images to avoid the image getting cut because of outlook's 1780px page-break stupidness.
Problem is: during editing everything is shown perfectly, and the template remains as it should. Upon sending, the image for the left column is kept without change, but the header and right column images are removed. The img tags are simply removed from the email body. The table retains its structure and proper size (no unformatting), but in the cells where the images should be, only empty space is there.
In outlook 2007 this does not happen, all is forwarded without a problem.
Did a series of troubleshooting steps, and discovered that if I edit the html file on word 2003 and copy it to outlook using office's clipboard manager, the images are also removed. Saving the email in outlook 2003 (just a plain save to file) also removes the image.
I'm trully at a loss here, as everything SHOULD be working...
