Богатые HTML-письма в Outlook 2007 и 2010... как вы удаляете верхнюю границу?

У меня богатый HTML-адрес электронной почты. Мне было интересно, как в Outlook 2010 и 2007 вы получаете таблицу в макете, чтобы сместиться с краем браузера?

Посмотрите на этот рис:

Розовый цвет фона тега тела, а серый - bg таблицы. У них как всего 0 (margin, paddting ect). Но есть еще какое-то место. Розовый не должен быть виден.

Кто-нибудь знает, как избавиться от этого пространства на теле?

Также есть CSS для начала отправки по электронной почте:

<html>
<head>

    <style type="text/css">
        html, body{ width:100%; }
        body{ background-color:#ff00ff; }
    </style>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Test</title>
</head>
  <body topmargin="0" style="margin:0; padding:0; width:100%; background-color:#ff00ff;" >
            <table topmargin="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;border-spacing: 0;border: 0; margin:0; padding:0; background-color:#eee;" >

Ура!

Ответ 1

Outlook 2007/2010 добавляет 15px верхнее/нижнее и 10px левое/правое дополнение к всем html-сообщениям. Вы не можете избавиться от него.

~~Вот трюк для фальсификации полных фонов: http://www.campaignmonitor.com/forums/viewtopic.php?pid=17048~~

Ответ 2

Outlook использует разбитый Microsoft Word механизм HTML и не основан на каком-либо разумном сходстве с браузером.

Если у вас есть Word, вы можете хотя бы открыть свой адрес электронной почты в виде html и посмотреть, как он отображает его, не проходя весь почтовый цикл.

Outlook действительно в проклятии любого маркетолога электронной почты. Это абсолютная куча дерьма и не поддерживает даже самые основные ожидания CSS.

Мне пришлось бы иметь много откровенных и разочаровывающих обсуждений с графическими дизайнерами по поводу ограничений электронной почты как платформы из-за Outlook. Microsoft серьезно сделала шаг назад в использовании механизма Word для Outlook.

Ответ 3

С чистым CSS (я не уверен, что создатели IE любят читать это), вы можете использовать !important, чтобы заставить поле и дополнение <table> и <body> быть 0px:

html, body
{
  margin: 0px !important;
  padding: 0px !important;
}

table
{
  margin: 0px !important;
}

Возможно, это сработает, но, возможно, нет. Я не уверен, как Outlook обрабатывает CSS...

Ответ 4

Указать, что <body style="padding:0px; margin:0px;"> не работает.

Я считаю, что с Outlook 2007/2010, если вы применили padding-top к столбцу, но не к другим столбцам в той же строке, Outlook по какой-то причине применит это дополнение ко всем столбцам. Можете ли вы вставить больше кода электронной почты, чтобы мы могли посмотреть, что это не что-то другое, вызывающее проблему.

Ответ 5

Попробуйте использовать margintop="0" marginleft="0" marginright="0" в теге <body> (обновленный до полного примера):

<html>
<head>
  <title>Title Tag</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ff00ff">
<table width="100%" cellmargin="0" cellspacing="0" border="0"><tr><td width="100%">
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td width="600">

</td></tr></table>
</td></tr></table>
</body>
</html>

Вам нужно будет установить ширину 600 на любую ширину вашей электронной почты.

Существуют кросс-электронные клиентские ошибки с тегами тела и значениями заполнения/поля в CSS.

NB - это необходимо и работает только на теге тела.

Ответ 6

Поскольку прогноз не поддерживает маржу - ссылка. Моя работа по этому вопросу была следующей. Надеюсь, это поможет кому-то.

                <table cellpadding="0" cellspacing="0" border="0" style="width:100% !important;  margin:0; padding:0; background-color:#ffffff; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <!-- SECTION:TOP -->
                    <tr style="margin:0; padding:0; border:0;">
                        <td>
                            <img src="/assets/images/10049-2013-Email_03.gif" alt="" height="104" width="145" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_04.gif" alt="" height="104" width="261" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_05.gif" alt="" height="104" width="144" border="0"style="display:block;" />
                        </td>
                    </tr>
                    <tr style="margin:0; padding:0; border:0;">
                        <td>
                            <img src="/assets/images/10049-2013-Email_06.gif" alt="" height="104" width="145" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_07.gif" alt="" height="104" width="261" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_08.gif" alt="" height="104" width="144" border="0"style="display:block;" />
                        </td>
                    </tr>

Ответ 7

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

http://theboywhocriedfox.com/code-snippets/fixing-the-forced-body-padding-in-outlook-2007-2010-and-2013/

"Фиксация принудительного заполнения тела в Outlook 2007, 2010 и 2013

Тестирование html-письма в последнее время с высоким процентом получателей вероятно, будут пользователями Microsoft Outlook. Я столкнулся с ошибкой, где ее невозможно перезаписать принудительное заполнение кузова в версиях outlook (которые используют MS Words rendering engine 2007, 2010, 2013).

Это нарушало дизайн и вызывало нежелательные пробелы на левый край электронной почты. Оскорбительные версии поддержки Outlook маржа (включая отрицательную маржу), но поддерживает только встроенные стили. Так исправление/взлома - обернуть всю электронную почту в таблицу обертки и применить отрицательная маржа только для проблемных почтовых клиентов - с помощью html 'if как показано ниже".

<!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td>
<!--<![endif]-->

<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
 <tr>
   <td>
<![endif]-->
    <!-- YOUR CONTENT HERE -->
    </td>
  </tr>
</table>