Попытка избавиться от горизонтальных и вертикальных пробелов в электронной почте HTML.

Я пытался создать электронное письмо в формате HTML, представляющее собой всего одно изображение, которое я нарезал с помощью Fireworks CS4. При просмотре в IE, Opera и Firefox фактическое изображение выглядит нормально. Однако, как только я импортирую его в Microsoft Outlook 2007, я получаю горизонтальные пробелы под верхним изображением (WinstonsAd_r1_c1) и вертикальное пространство между двумя нижними изображениями (WinstonsAd_r2_c1 и WinstonsAd_r2_c2 соответственно).

У меня есть cellpadding="0" CellsPacing="0" border="0" и td img {display: block;}. Я попытался удалить все пробелы между и из кода.

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <!-- saved from url=(0014)about:internet -->
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>WinstonsAd.gif</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <!--Fireworks CS3 Dreamweaver CS3 target.  Created Thu Jul 22 17:06:09 GMT-0400 (Eastern Daylight Time) 2010-->
</head>
<body bgcolor="#ffffff">
<style type="text/css">td img {display: block;}</style>
<table border="0" cellpadding="0" cellspacing="0" width="1023">
<!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="WinstonsAd.gif" fwstyle="Dreamweaver" fwdocid = "35095674" fwnested="0" -->
<tr>
<td><img src="spacer.gif" width="646" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="377" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="2"><a href="http://www.winstonsbilliards.com"><img name="WinstonsAd_r1_c1" src="WinstonsAd_r1_c1.gif" width="1023" height="647" border="0" id="WinstonsAd_r1_c1" alt="Visit Our Home Page" /></a></td>
<td><img src="spacer.gif" width="1" height="647" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="http://www.google.com/maps?source=s_q&amp;hl=en&amp;q=Winstons+Billiards+Cafe&amp;sll=39.005045,-77.067375&amp;sspn=0.259055,0.458336&amp;ie=UTF8&amp;cd=1&amp;hq=Winstons+Billiards+Cafe&amp;hnear=1776+E+Jefferson+St,+Rockville,+Montgomery,+Maryland+20852&amp;geocode=FQBAVAIdGuhm-w&amp;ll=39.057"><img name="WinstonsAd_r2_c1" src="WinstonsAd_r2_c1.gif" width="646" height="35" border="0" id="WinstonsAd_r2_c1" alt="Google Map To Winston's" /></a></td>
<td><a href="http://www.winstonsbilliards.com"><img name="WinstonsAd_r2_c2" src="WinstonsAd_r2_c2.gif" width="377" height="35" border="0" id="WinstonsAd_r2_c2" alt="Visit Our Home Page" /></a></td>
<td><img src="spacer.gif" width="1" height="35" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>

Любое подстрекательство к тому, почему это все еще происходит, будет высоко оценено.


html html-email
person Charlie    schedule 23.07.2010    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Я вижу, что здесь происходит несколько вещей:

<tr>
<td><img src="spacer.gif" width="646" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="377" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="2"><a href="http://www.winstonsbilliards.com"><img name="WinstonsAd_r1_c1" src="WinstonsAd_r1_c1.gif" width="1023" height="647" border="0" id="WinstonsAd_r1_c1" alt="Visit Our Home Page" /></a></td>
<td><img src="spacer.gif" width="1" height="647" border="0" alt="" /></td>
</tr>
<tr>

Acid test сообщает, что ваши столбцы не соответствуют общей ширине. Это может быть не вся проблема, но это может быть частью проблемы. Либо отрегулируйте общую ширину таблицы, либо вычтите единицу из td.

Outlook 07/10 не поддерживает форматирование display:block для вашего изображения. Кроме того, spacer.gif — это относительная ссылка, которая сломается при отправке. Вот отличный ресурс, чтобы узнать, какие элементы CSS работают (или не работают в Outlook) http://www.campaignmonitor.com/downloads/documents-tools/Campaign_Monitor_Guide_to_CSS_Support_in_Email_April_2010.pdf

С точки зрения пользовательского интерфейса ваша страница довольно широкая... большинство людей, которых я знаю, запускают Outlook с несколькими "панелями", и это приводит к увеличению размера... то же самое в Hotmail, вызывая диалоговое окно с ошибкой. Подумайте о снижении размера до 800 или даже ниже. Я отправляю много электронных писем по работе, и мы никогда не превышаем 750 писем. Наконец, Outlook и Gmail по умолчанию отключают изображения. Поскольку там нет контента, кроме изображений, все пользователи изначально ничего не увидят, пока не предпримут какие-либо действия... нехорошо. Многие никогда не потрудятся щелкнуть ссылку, что сделает ваше электронное письмо неэффективным для этой части аудитории. Текст не сексуальный... но вы практически гарантированно его увидит ваша аудитория. Удачи.

person bpeterson76    schedule 23.07.2010
comment
Привет, bpeterson76, спасибо за ответ, прочитав, что вы никогда не отправляете электронные письма размером более 750 пикселей, я сократил все это до этого, и это избавило меня от странных пробелов, с которыми я сталкивался. Я удалил spacer.gif и display:block, и, судя по всему, он все еще работает. Я понимаю вашу точку зрения только на изображения, по какой-то странной причине мой друг хочет, чтобы это было не что иное, как одно большое изображение. хлопает по лбу Надеюсь, я смогу убедить его, что это очень-очень плохая идея. Большое спасибо за помощь, я должен вам много пива. - person Charlie; 23.07.2010
comment
Вот простой способ проиллюстрировать вашу задачу тем, кто не занимается бизнесом: получите панель инструментов веб-разработчика Firefox здесь: chrispederick.com/work/web-developer Получив его, загрузите электронную почту и отключите изображения. Вуаля, вы только что проиллюстрировали свою задачу. Чертовски плохо, что электронная почта не может справиться с заменой изображений Лихи/Лэнгриджа, потому что это решило бы все ваши проблемы одним махом. - person bpeterson76; 23.07.2010

arrow_upward
2
arrow_downward

Находясь в представлении кода, вставьте курсор после border="0" и введите тип style="display: block;". Сделайте это для каждого изображения/фрагмента.

Надеюсь это поможет.

person Marc    schedule 06.04.2011

arrow_upward
0
arrow_downward

Используйте тег «tbody» с высотой строки, равной 0.

Попробуй это:

<table style="border: none;" border="0" cellspacing="0" cellpadding="0">
<tbody style="line-height: 0px;">
<tr>
<td><img src="sample_image.jpg" style="padding: 0px; margin:0px; display: block; border: none;"></td>
<td><img src="sample_image.jpg" style="padding: 0px; margin:0px; display: block; border: none;"></td>
</tr>
<tr>
<td><img src="sample_image.jpg" style="padding: 0px; margin:0px; display: block; border: none;"></td>
<td><img src="sample_image.jpg" style="padding: 0px; margin:0px; display: block; border: none;"></td>
</tr>
</tbody>
</table>
person Filo    schedule 15.03.2013