Попытка избавиться от горизонтальных и вертикальных пробелов в электронном письме HTML.
Я пытался создать электронное письмо HTML, которое является всего одним изображением, что я нарезал Фейерверки использования CS4. При рассмотрении его в IE, Opera и Firefox действительный образ выглядит хорошо. Однако, как только я импортирую его в Microsoft Outlook 2007, я заканчиваю с горизонталью пробелы ниже главного изображения (WinstonsAd_r1_c1) и вертикальное пространство между нижней частью два изображения (WinstonsAd_r2_c1 и WinstonsAd_r2_c2 соответственно).
У меня есть cellpadding = "0" cellspacing = "0" граница = "0" и td img {дисплей: блок;}. Я пытался удалить все пробелы между, и из кода.
Для прямо сейчас я не загрузил код или изображения к веб-серверу, главным образом вследствие того, что человек, для которого я делаю это, еще не купил тот.
<!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&hl=en&q=Winstons+Billiards+Cafe&sll=39.005045,-77.067375&sspn=0.259055,0.458336&ie=UTF8&cd=1&hq=Winstons+Billiards+Cafe&hnear=1776+E+Jefferson+St,+Rockville,+Montgomery,+Maryland+20852&geocode=FQBAVAIdGuhm-w&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>
Любой подстрекает к тому, почему это все еще происходит, очень ценился бы.
1 ответ
Я вижу, что здесь происходит несколько вещей:
<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.
Outlook 07/10 не поддерживает отображение: блокировать форматирование изображения.Кроме того, 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 по умолчанию отключают изображения. Поскольку там нет контента, кроме изображений, все пользователи изначально ничего не увидят, пока не предпримут действия ... нехорошо. Многие никогда не потрудятся щелкнуть ссылку, что сделает вашу электронную почту неэффективной для этой части аудитории. Текст не является сексуальным ... но вам практически гарантировано, что ваша аудитория его увидит. Удачи.