HTML Email Nightmare

Question

Пытается код для Outlook, и я хочу плакать. Я не знаю, как проверить или выяснить, где это происходит. Но это выглядит ужасно в Outlook и прекрасно повсеместно. Я уже потратил 5 часов, пытаясь переделать его с некоторым успехом, но ни одно из дополнений или интервалов не поддерживается в области заголовка логотипа или правой боковой панели.

Любая помощь будет оценена BEYOND: http://cdpn.io/GAzqh

Спасибо, спасибо, спасибо

Answer 1

Похоже, внешний вид HTML-рендеринга приведен в Microsoft Word http://www.howto-outlook.com/faq/wordhtml.htm. В ссылке есть несколько советов, которые рассказывают о том, как обойти проблемы.

Answer 2

Вам необходимо установить ширину на ячейках. Outlook не знает, насколько широка их реализация.

Код заголовка должен выглядеть примерно так. Я немного упростил это для вас:

<table border="0" cellpadding="0" cellpadding="0" width="100%"> 
    <tr> 
    <td width="40%" align="center" valign="top" style="padding-top: 10px; padding-bottom: 10px; padding-left: 25px"> 
     <img align="left" alt="MD Logistics" border="0" width="167" src="http://www.mdlogistics.com/emailassets/logo.png" title="MD Logistics"/> 
    </td> 
    <td width="60%" align="right" valign="center" style="padding-top: 10px; padding-bottom: 10px; padding-right:25px;"> 
     <img src="http://www.mdlogistics.com/emailassets/linkedin.jpg"/>&nbsp;&nbsp;&nbsp; 
     <img src="http://www.mdlogistics.com/emailassets/facebook.jpg"/>&nbsp;&nbsp;&nbsp; 
     <img src="http://www.mdlogistics.com/emailassets/youtube.jpg"/>&nbsp;&nbsp;&nbsp; 
     <img src="http://www.mdlogistics.com/emailassets/twitter.jpg" /> 
    </td> 
    </tr> 
</table> 

Поскольку у вас достаточно места для социальных иконок, я просто вставляю их в линию. Вы могли бы держать их в клетках, хотя, но это было больше кода, чтобы сделать это таким образом.