2013-04-02 1 views
1

Итак, типичный вопрос. Я искал здесь лодку. Пробовал все предлагалось. Nutin 'Outlook HTML email - вертикальные промежутки в срезах изображений

Так что, может быть, задать вопрос свежий.

У меня есть некоторые пробелы в Outlook 2013 (и 2007 тоже, я думаю) между моими изображениями. (Также мой текст расширяется дальше, чем он установлен)

Зная, что отображение: блок на самом деле не работает для Outlook. Я пробовал обертывание в промежутках и давал пролету дисплей: блок

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

http://pastebin.com/ESfEmWer http://tinypic.com/r/2gtdhu1/6

+0

Благодарим вас за ваши предложения. Я попытался использовать display: inline-block удостоверился, что крах-коллапс: сбой; был набором свойств и даже вынул ВСЕ пробелы, чтобы быть уверенным, что http://pastebin.com/aeTBi9kw все еще получают эти пробелы, видимые на изображении http://tinypic.com/r/2gtdhu1/6, это головной скребок. Я оставил на дисплее: потому что это то, что помогает Gmail делать горизонтальные промежутки. – BMCwebdev

ответ

1

У вас есть тонна пробельных вызывает разрыв:

<a href="mms://a1783.v167326.c16732.g.vm.akamaistream.net/7/1783/16732/0/QPS.Onstreammedia.com/origin/jjready2/%5bInbox%5d/Talent%20Management/CDF%201-18_WMV.wmv"> 
          <img style="display:block" src="http://emaniocreative.com/eblasts/3_26_2013/Message-from-Dominic-&-Louise.jpg" width="360" height="257" border="0" alt="Message from Dominic &#38; Louise - Video"></a> 

Попробуйте принимать пробелы из .. также display:block не работает, как display:inline-block (позже вы, вероятно, хотите вместо) Вы не можете добавить форматирование, например margin, или padding в SPAN. Я бы сохранил то, что у вас есть, как IMG и DIV элементов, однако если вы используете TABLE, вам может понадобиться набор border-collapse:collapse;.

отметить также, если вы используете display:inline-block вы хотите вывезти ВСЕ пробелы между вашими элементами:

<tr>...</tr><tr>...</tr> 

Вместо того, что у вас есть в данный момент:

<tr> 
    ... 
</tr> 
<tr> 
    ... 
</tr> 
2

Дон» t go for

display: [anything] 

если вы хотите включить Outlook 2007. См. http://www.xequte.com/support/maillistking/css_in_emails.html, для каких стилей CSS вы можете использовать и чего лучше не делать.

Не используйте пробельные задней

<td> 

и не использовать никаких пробелов, предшествующих

</td> 

И вы также должны избегать

<style>...</style> 

как это, скорее всего, будут полностью удалены. Всегда выбирайте встроенные стили. И я знаю, что это не часть реального ответа, но точно так же, как подсказка: если вы делаете информационные бюллетени HTML, делайте их так, как будто вы делаете их для Internet Explorer 4. Клиенты электронной почты, такие как Outlook, используют самые смешные CSS- визуализатор, который вы можете себе представить. Даже Internet Explorer 5 более изощрен в предоставлении CSS, а затем современных Outlook.

О, и кстати: если есть вероятность, что получатели вашего бюллетеня могут читать их в Интернете в hotmail, gmx или gmail, тогда вы также должны их проверить.Вы будете в страхе и удивляться, как эти онлайн-клиенты обрабатывают ваш код и что они вводят.

1

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

Я создал сотни писем и не имел никаких проблем с пробелами, вызванными возвратом строки в коде электронной почты. (Outlook 2007 - это первое, на что я проверяю мои письма)

Всегда полезно использовать display:block;, а также хранить изображения самостоятельно <td>.

попробовать что-то вроде этого, вместо:

<html> 
<head> 
<title>Ambassador Newsletter</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style>img {display:block}</style> 
</head> 

<!--REPLACE the following text with the path to the images on your server http://emaniocreative.com/eblasts/3_26_2013/ --> 

<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#ebebeb" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;"> 
<table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border-collapse: collapse;"> 
    <tr> 
     <td> 

<!-- NEST A TABLE INSTEAD--> 
     <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#770000"> 
     <tr> 
      <td style="padding:20px;"> 
      header 
      </td> 
     </tr> 
     </table> 
<!-- /NEST--> 

    </td> 
    </tr> 
    <tr> 
     <td> 

<!-- NEST A TABLE INSTEAD--> 
     <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td style="padding:20px;"> 
      Body section 1 
      </td> 
     </tr> 
     <tr> 
      <td style="padding:20px;"> 
      Body section 2 
      </td> 
     </tr> 
     </table> 
<!-- /NEST--> 

     </td> 
    </tr> 
</table> 

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

В моем примере я использовал отступы вместо ячеек для интервала.

Вам не потребуется пустая проставка. Используйте &nbsp; в пустую ячейку, вместо этого, если вы предпочитаете не использовать отступы:

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#770000"> 
    <tr> 
     <td height="20" colspan="3"> 
     &nbsp; 
     </td> 
    </tr> 
    <tr> 
     <td width="20"> 
     &nbsp; 
     </td> 
     <td width="610"> 
     header 
     </td> 
     <td width="20"> 
     &nbsp; 
     </td> 
    </tr> 
    <tr> 
     <td height="20" colspan="3"> 
     &nbsp; 
     </td> 
    </tr> 
    </table> 

На стороне записки, существует неизбежный вопрос с вертикальным разделением при пересылке из Outlook, в Gmail, например, (любезно MSO добавлены нормальные теги p), но для первого получателя проблем нет.

Смежные вопросы