Обширные HTML-письма в Outlook 2007 и 2010 ... как убрать верхнее поле? - PullRequest
Новая
       33

Обширные HTML-письма в Outlook 2007 и 2010 ... как убрать верхнее поле?

10 голосов
/ 04 апреля 2011

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

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

enter image description here

Розовый цвет - это цвет фона тега body, а серый - цвет таблицы. Они оба имеют 0 все (поле, отступ и т. Д.). Но еще есть место. Розовый не должен быть видимым.

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

Также вот несколько 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;" >

Ура!

Ответы [ 7 ]

12 голосов
/ 04 мая 2011

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

Вот трюк, чтобы подделать полный фон: http://www.campaignmonitor.com/forums/viewtopic.php?pid=17048

6 голосов
/ 19 апреля 2011

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

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

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

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

0 голосов
/ 01 мая 2014

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

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 2007, 2010, 2013).

Это нарушало дизайн и приводило к появлению нежелательных пробелов в левом поле электронной почты. Оскорбительные версии Outlook поддерживают margin (включая отрицательное поле), но толькоподдержка встроенных стилей. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *} * * * * * * • • • • • • • • • • • • • • • • • • • • • • • Исправление или хакерство заключается в том, чтобы обернуть всю электронную почту в таблицу-обертку и применить отрицательное поле только для проблемных почтовых клиентов.1031 * заявления "аs ниже. "

<!--[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>
0 голосов
/ 28 февраля 2013

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

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

0 голосов
/ 14 апреля 2011

Попробуйте использовать 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, равную ширине вашего письма.

В клиенте есть кросс-почтовые ошибки с тегами body и значениями отступов / полей в CSS.

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

0 голосов
/ 04 апреля 2011

Становитесь, что <body style="padding:0px; margin:0px;"> не работает.

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

0 голосов
/ 04 апреля 2011

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

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

table
{
  margin: 0px !important;
}

Может быть, это будет работать, а может и нет.Я не уверен, как Outlook обрабатывает CSS ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...