Jump to content
  • 0

Проблема с движком Outlook 2007/2003


Inspirer
 Share

Question

Ребята, помогайте, кто соображает в чем может быть проблема. Сверстал письмо для рассылки, во всех браузерах нормально отображается, даже IE6 и тот все показывает. Но при переносе в программу для рассылок и при получении в outlook или при попытке отправить этот бланк через outlook express в верстке есть косяк, который никак не могу победить.

Пробовал :

- делать боковые изображения блочными элементами

- ставить у изображений line-height:1px

- везде ставить паддинги и маргины нулевые.

В общем версии кончились, нужно быстрее решить проблему, помогите, кто сможет. Проблема на скриншоте изображена. код прикрепил

картинка в спойлере

http://plasmon.rghost.ru/42194556/image.png

<html>
<head>
<title>Новые товары интернет-магазина ВОЛЬТА</title>
<meta charset="windows-1251">
</head>
<body>
<table cellpadding="0" cellspacing="0" style="margin:auto">
<tr>
<td>
<table style="width:900px;margin:auto" cellpadding="0" cellspacing="0">
<tr>
<td width="25">
<img width="25" height="1" src="http://www.voltacom.ru/project/data/content/elements/block.gif">
</td>
<td height="106" width="430">
<a title="Вольта" href="http://www.voltacom.ru/"><img alt="Вольта" hspace="0" src="http://www.voltacom.ru/project/imgs/logo.png" border="0"></a>
</td>
<td style="color:#7C7C7C;font:16px tahoma" align="right" width="430">
<span style="line-height:25px">(863) 2-974-974</span><br>
<span>(863) 221–60–90</span><br>
<a style="text-decoration:underline;color:black;font:12px tahoma;line-height:25px" target="_blank" href="http://www.voltacom.ru/livezilla/chat.php"> Online консультант</a><br>
</td>
<td width="25">
<img width="25" height="1" src="http://www.voltacom.ru/project/data/content/elements/block.gif">
</td>
</tr>
</table>
<table style="width:900px;margin:auto" cellpadding="0" cellspacing="0">
<tr>
<td height="23">
<img src="http://www.voltacom.ru/project/data/self/offer.gif" height="22" width="900">
</td>
</tr>
<tr>
<td style="font-size: 10px;color: #888b9c;font-family: Verdana, Arial;text-decoration:none;line-height:16px;" align="right" valign="top">Не можете прочитать это письмо? <a href="http://www.voltacom.ru/project/data/content/pages/20121212.html" target="_blank" style="font-size: 10px;color: #6AAA06;font-family: Verdana, Arial;text-decoration:none;line-height:16px">Щелкните здесь</a>
</td>
</tr>
</table>
<table style="width:900px;margin:auto" cellpadding="0" cellspacing="0">
<tr>
<td width="50">
<img width="50" height="1" src="http://www.voltacom.ru/project/data/content/elements/block.gif">
</td>
<td>
<br>
<table cellpadding="0" cellspacing="0" width="800" style="text-align:left;font:normal 14px Tahoma;color:#585858">
<tr>
<td>
<p style="color:#58585A">Добрый день!</p>
<p>Уважаемый клиент, Вы получили это письмо, так как подписаны на новости интернет-магазина ВОЛЬТА.<br>
Компания Huawei пополнила свою линейку коммуникаторов новыми интересными устройствами, которые уже можно приобрести в нашем интернет-магазине. Уделите пожалуйста немного Вашего времени и ознакомьтесь с новинками, возможно Вы встретите то, что давно искали.
</p>
</td>
</tr>
</table>
<br>
<table cellpadding="10" cellspacing="0" width="800" style="text-align:center;font:normal 12px Tahoma;color:#585858">
<tr>
<td style="width:450px" valign="top">
<br>
<p style="font:normal 16px Tahoma;color:#6AAA06;text-align:center"><b>Huawei Honor (U8950) pro</b></p>
<p align="left" style="line-height:1.5">
<a target="_blank" href="http://www.voltacom.ru/catalog/mobile/pda/huawei/honor-(u8950)-pro_black/" style="color:#F25D23;text-decoration:none">Huawei Honor (U8950) pro</a> - смартфон на базе ОС Android 4.0.3, который стал преемником невероятно удачной модели Huawei Honor U8860. Устройство оснащено 4.5-дюймовым дисплеем с высоким разрешением и качеством изображения. Благодаря аккумулятору емкостью 1930 мА/ч, Huawei Honor pro позволит совершать звонки и иметь доступ в Интернет до трех дней без повторной подзарядки — это самый долгий срок работы аккумулятора среди смартфонов с 4.5-дюймовыми экранами.</p>
<p align="left" style="line-height:1.5">
<a target="_blank" href="http://www.voltacom.ru/catalog/mobile/pda/huawei/honor-(u8950)-pro_black/" style="color:#F25D23;text-decoration:none">Huawei Honor (U8950) pro</a> представляет собой мощное мобильное устройство в стильном тонком корпусе толщиной 11.2 мм. При этом вес устройства составляет всего 156 г. Смартфон имеет сертификацию DLNA, что обеспечивает совместимость с другими DLNA-сертифицированными устройствами, такими как цифровые камеры, игровые консоли и ТВ. Это позволяет производить легкую передачу цифровых фотографий, музыки и видео между разными домашними устройствами по беспроводному соединению.
</p>
</td>
<td style="width:350px" align="center">
<p><a target="_blank" href="http://www.voltacom.ru/catalog/mobile/pda/huawei/honor-(u8950)-pro_black/" title="Перейти в карточку товара"><img alt="Huawei Honor (U8950) pro" src="http://www.voltacom.ru/project/data/content/images/honor_pro.png" width="330" height="340"></a></p>
</td>
</tr>
</table>
<br>
<table cellpadding="10" cellspacing="0" width="800" style="text-align:center;font:normal 12px Tahoma;color:#585858">
<tr>
<td style="width:350px" align="center">
<p><a target="_blank" href="http://www.voltacom.ru/catalog/mobile/pda/huawei/ascend-d1-(u9500)_black/" title="Перейти в карточку товара"><img alt="Huawei Ascend D1 (U9500)" src="http://www.voltacom.ru/project/data/content/images/huawei_d1.jpg" width="300" height="166"></a></p>
</td>
<td style="width:450px" valign="top">
<p style="font:normal 16px Tahoma;color:#6AAA06;text-align:center"><b>Huawei Ascend D1 (U9500)</b></p>
<p align="left" style="line-height:1.5">
Коммуникатор<a target="_blank" href="http://www.voltacom.ru/catalog/mobile/pda/huawei/ascend-d1-(u9500)_black/" style="color:#F25D23;text-decoration:none"> Huawei Ascend D1 (U9500)</a> является воплощением мощности, производительности и элегантного дизайна от компании Huawei. Судите сами, в этом устройстве установлен двухъядерный процессор с тактовой частотой 1.5 ГГц и 1 Гб оперативной памяти, высококонтрастный IPS+ экран с HD разрешением и широкими углами обзора, камера с матрицей 8МП, двойной вспышкой и возможностью съемки Full HD видео, а так же слот под карту памяти, сенсорные датчики, фронтальная камера и многое другое. Так же, одним из самых явных преимуществ, для данного уровня устройств, является доступная цена.
</p>
</td>
</tr>
</table>
<br>
<table cellpadding="10" cellspacing="0" width="800" style="text-align:center;font:normal 12px Tahoma;color:#585858">
<tr>
<td style="width:450px" valign="top">
<br>
<p style="font:normal 16px Tahoma;color:#6AAA06;text-align:center"><b>Huawei Ascend P1 (U9200) XL</b></p>
<p align="left" style="line-height:1.5">
<a target="_blank" href="http://www.voltacom.ru/catalog/mobile/pda/huawei/ascend-p1-(u9200)-xl_black/" style="color:#F25D23;text-decoration:none">Huawei Ascend P1 (U9200) XL</a> - флагманский коммуникатор от компании Huawei с увеличенной емкостью аккумулятора 2600мА/ч, толщина корпуса всего 9.9 мм. Устройство работает на надежной, проверенной и эргономичной операционной системе Google Android ICS 4.0. Высокую производительность обеспечивает процессор двухъядерный 1.5 ГГц с оперативной памятью 1Гб и встроенной памятью 4 Гб, так же поддерживаются карты памяти microSD до 32 Гб. Экран размером 4.3", выполненный по технологии Super AMOLED имеет высокое разрешение 540х960 точек и выдает отличную, сочную картинку. Камера 8МП с автофокусом и светодиодной вспышкой позволяет получать отличные снимки и снимать видео высокой четкости Full HD.
</p>
</td>
<td style="width:350px" align="center">
<p><a target="_blank" href="http://www.voltacom.ru/catalog/mobile/pda/huawei/ascend-p1-(u9200)-xl_black/" title="Перейти в карточку товара"><img alt="Huawei Ascend P1 (U9200) XL" src="http://www.voltacom.ru/project/data/content/images/huawei_p1_xl.jpg" width="300" height="240"></a></p>
</td>
</tr>
</table>
<br>
<table cellpadding="10" cellspacing="0" width="800" style="text-align:center;font:normal 12px Tahoma;color:#585858">
<tr>
<td style="width:350px" align="center">
<p><a target="_blank" href="http://www.voltacom.ru/catalog/mobile/pda/huawei/ascend-d1-(u9510)-quad-xl_black/" title="Перейти в карточку товара"><img alt="Huawei Ascend D1 (U9510) Quad XL" src="http://www.voltacom.ru/project/data/content/images/huawei_d1_xl.jpg" width="300" height="260"></a></p>
</td>
<td style="width:450px" valign="top">
<br>
<p style="font:normal 16px Tahoma;color:#6AAA06;text-align:center"><b>Huawei Ascend D1 (U9510) Quad XL</b></p>
<p align="left" style="line-height:1.5">
Коммуникатор<a target="_blank" href="http://www.voltacom.ru/catalog/mobile/pda/huawei/ascend-d1-(u9510)-quad-xl_black/" style="color:#F25D23;text-decoration:none"> Huawei Ascend D1 (U9510) Quad XL</a> – генератор развлечений с 4,5-дюймовым сенсорным дисплеем разрешением 1280х720 точек и самым мощным 32-битным True Color графическим процессором. Обладатели нового смартфона смогут легко воспользоваться своим устройством практически в любых условиях, благодаря экрану с плотностью точек 330 PPI, который обеспечивает превосходный обзор даже под прямыми солнечными лучами, и системам Dolby 5.1 Surround Sound и Audience earSmart™. 8-мегапиксельная основная камера с BSI сенсором, 1.3-мегапиксельная фронтальная камера устройства в сочетании с возможностью записи и воспроизведения видео в формате 1080p full HD позволяют сохранять особенные моменты жизни в малейших деталях.
</p>
<p align="left" style="line-height:1.5">
Ascend D quad XL поставляется с аккумулятором объемом 2600 м*Ач, способным работать до трех дней без подзарядки при стандартном режиме эксплуатации.
</p>
</td>
</tr>
</table>

<table cellpadding="10" cellspacing="0" width="800" style="text-align:center;font:normal 12px Tahoma;color:#585858">
<tr>

<td style="width:550px" valign="top">
<br>
<p style="font:normal 16px Tahoma;color:#6AAA06;text-align:center"><b>О Huawei Device</b></p>
<p align="left" style="line-height:1.5">
Продукты Huawei Device представлены во многих секторах рынка высокотехнологичных устройств: подразделение предлагает мобильные телефоны и <a title="Посмотреть коммуникаторы Huawei" target="_blank" href="http://www.voltacom.ru/catalog/mobile/pda/huawei/" style="color:#F25D23;text-decoration:none">смартфоны</a>, <a title="Посмотреть планшеты Huawei" target="_blank" href="http://www.voltacom.ru/catalog/mobile/tablet/huawei/" style="color:#F25D23;text-decoration:none">планшетные компьютеры</a>, <a title="Посмотреть модемы Huawei" target="_blank" href="http://www.voltacom.ru/catalog/mobile/3gmodem/Huawei" style="color:#F25D23;text-decoration:none">оборудование для широкополосного доступа в Интернет</a> и устройства для домашнего использования. Для повышения функциональности и удобства использования устройств, пользователям предоставляется доступ к фирменному магазину приложений Hi Space App Store и «облачному» сервису Management Cloud. Подразделение ориентируется на потребности пользователей и стремится обеспечить им все возможности, которые предоставляет Интернет, при использовании мобильных устройств. Благодаря партнерским отношениям с более чем 500 операторами связи, такими как Telefonica, China Mobile, Vodafone, T-Mobile, BT, China Telecom, NTT Docomo, France Telecom, и China Unicom продукты компании можно приобрести более чем в 140 странах мира.
</p>
</td>
<td style="width:250px" align="center">
<br><br>
<p><a target="_blank" href="http://www.voltacom.ru/catalog/mobile/pda/huawei/" title="Посмотреть всю продукию"><img alt="Продукция Huawei" src="http://www.voltacom.ru/project/data/content/logo/huawei-logo.jpg" width="180" height="180"></a></p>
</td>
</tr>
</table>
</td>
<td width="50">
<img width="50" height="1" src="http://www.voltacom.ru/project/data/content/elements/block.gif">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" style="text-align:center;font:normal 12px Tahoma;color:#585858;margin:auto">
<tr>
<td width="38" height="345">
<img width="38" height="345" src="http://www.voltacom.ru/project/data/content/elements/left.png">
</td>



<td bgcolor="#e8e9ec" width="900" height="280">
<table cellpadding="0" cellspacing="0" width="800" style="text-align:center;font:normal 12px Tahoma;color:#585858;margin:auto" >
<tr>
<td bgcolor="#e8e9ec" align="left" valign="top" cellpadding="15">
<table cellpadding="0" cellspacing="0" style="font:normal 11px Tahoma;color:#585858" align="center">
<tr>
<td colspan="4" width="800" align="left" style="font:normal 13px Tahoma;color:#675C53">
<p style="paddin-left:50px"><b>
Интернет-магазин ВОЛЬТА</b>
<br><br>
</p>
</td>
</tr>
<tr>
<td style="padding-left:50px;width:180px">
<p style="line-height:1.7">
<a style="color:#878787;text-decoration:none" target="_blank" href="http://www.voltacom.ru/inform/help/#q1" title="Информация о компании">О магазине</a>
<br>
<a style="color:#878787;text-decoration:none" target="_blank" href="http://www.voltacom.ru/inform/help/#q7" title="Возможные способы оплаты">Способы оплаты</a>
</p>
</td>
<td style="width:220px">
<p style="line-height:1.7">
<a style="color:#878787;text-decoration:none" target="_blank" href="http://www.voltacom.ru/inform/help/207#q12" title="Правила оформления кредита">Покупка в кредит</a>
<br>
<a style="color:#878787;text-decoration:none" target="_blank" href="http://www.voltacom.ru/inform/help/207#q1" title="Как узнать о наличии товара">Наличие товара на складе</a>
</p>
</td>
<td style="width:200px">
<p style="line-height:1.7">
<a style="color:#878787;text-decoration:none" target="_blank" href="http://www.voltacom.ru/news/" title="Новости интернет-магазина">Новости</a>
<br>
<a style="color:#878787;text-decoration:none" target="_blank" href="http://www.voltacom.ru/catalog/discount/" title="Товары со скидкой">Товары со скидкой</a>
</p>
</td>
<td style="width:250px">
<p style="line-height:1.7">
<a style="color:#878787;text-decoration:none" target="_blank" href="http://www.voltacom.ru/feedback/" title="Написать нам">Написать нам</a>
<br>
<a style="color:#878787;text-decoration:none" target="_blank" href="http://www.voltacom.ru/inform/giftcards/" title="Подарочные карты ВОЛЬТА">Подарочные карты</a>
</p>
</td>
</tr>
</table>
<br>
<table cellpadding="0" cellspacing="0" style="font:normal 11px Tahoma;color:#585858" width="800">
<tr>
<td width="800">
<p style="line-height:1.5">Доставка товара осуществляется бесплатно в пределах Ростова-на-Дону при заказе товара на сумму более 5 тыс. рублей.<br>
Доставка заказов в другие города Ростовсктой области и России осуществляются курьерскими службами наших партнеров согласно их тарифов*
</p>
<p style="font:10px;line-height:2">* Прочитать о способах достави и ознакомиться с тарифами можно по ссылке <a style="color:#675C53" href="http://www.voltacom.ru/inform/help/#q8" target="_blank"><b>доставка товара</b></a></p>
</td>
</tr>
<tr>
<td width="800">
<p>Если вы не хотите впредь получать новости от нашего магазина, откажитесь от подписки в своем личном кабинете на сайте магазина <a style="color:#675C53" href="http://www.voltacom.ru/cabinet/personal/" target="_blank"><b>www.voltacom.ru</b></a> или сообщите нам об этом ответом на данное письмо.</p>
</td>
</tr>
</table>
<br>
<table cellpadding="0" cellspacing="0" style="font:normal 11px Tahoma;color:#585858" width="800">
<tr>
<td rowspan="2" style="text-align:left;color:#7C7C7C;font:13px tahoma;padding-left:50px;width:240px">
<span style="line-height:20px">(863) 2-974-974</span>
<br>
<span>(863) 221–60–90</span><br>
<a title="Задать вопрос консультанту" style="text-decoration:underline;color:black;font:10px tahoma;line-height:25px" target="_blank" href="http://www.voltacom.ru/livezilla/chat.php"> Online консультант</a>
</td>
<td colspan="3" width="250" align="left">
<p style="font:normal 13px Tahoma;color:#878787;padding-left:5px"><b>Следите за нами в социальных сетях</b></p>
</td>
<td rowspan="2" style="text-align:right" valign="top">
<p>
<img alt="credit_card" src="http://www.voltacom.ru/project/data/self/advert/images/visa_mastercard.png" width="150" height="51">
</p>
</td>
</tr>
<tr>
<td width="100" align="right">
<a href="http://vk.com/voltacom" title="Перейти в группу Вконтакте"><p><img width="42" height="42" alt="vkontakte" src="http://www.voltacom.ru/project/data/content/elements/vk_grey.png"></p></a>
</td>
<td width="65" align="center">
<a href="https://www.facebook.com/voltacom.ru" title="Перейти в группу Facebook"><p><img width="42" height="42" alt="facebook" src="http://www.voltacom.ru/project/data/content/elements/fb_grey.png"></p></a>
</td>
<td width="100" align="left">
<a href="https://twitter.com/voltacomru" title="Перейти в группу Twitter"><p><img width="42" height="42" alt="twitter" src="http://www.voltacom.ru/project/data/content/elements/tv_grey.png"></p></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>

<td width="38" height="345">
<img width="38" height="345" src="http://www.voltacom.ru/project/data/content/elements/right.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

может это бордер? попробуй их ширину нулевой сделать. просто очень сложно понять из-за чего это. или на крайний случай можно попробовать owerflow: hidden для того блока задать и ширину отрегулировать...

Edited by Николя223
Link to comment
Share on other sites

  • 0

Спасибо, да я уже разобрался! Может кому пригодится информация! При верстке письма, каждый почтовый клиент добавляет свои отступы например к тегам <р>, <br> , уверен, что еще к некоторым. Причем отчтупы добавляется значительно больше простого переноса строки. К <p> в gmail и outlook добавлялось по 10 пикселей сверху и снизу, про <br> вообще молчу!Так как у меня подвал состоял из 3 ячеек, по бокам скругленные png, а в центре все остальное, тогда за счет отступов этих вытягивалась центральная часть таблицы! Важно заметить, что тот же outlook 2007 не может ресайзить картинки по высоте, ( думал сделать отступы растянутым пикселем гифом. Нифига, не вытягивает картинки по высоте.

В итоге решение такое, что вместо <br> нужно добавлять строку и в ячейку вставлять картинку распорку нужного цвета и размера, стараться поменьше использовать <p> , <span> так как отступов может много появиться)

Надеюсь кому полезна будет инфа

Link to comment
Share on other sites

  • 0

Спасибо, да я уже разобрался! Может кому пригодится информация! При верстке письма, каждый почтовый клиент добавляет свои отступы например к тегам <р>, <br> , уверен, что еще к некоторым. Причем отчтупы добавляется значительно больше простого переноса строки. К <p> в gmail и outlook добавлялось по 10 пикселей сверху и снизу, про <br> вообще молчу!Так как у меня подвал состоял из 3 ячеек, по бокам скругленные png, а в центре все остальное, тогда за счет отступов этих вытягивалась центральная часть таблицы! Важно заметить, что тот же outlook 2007 не может ресайзить картинки по высоте, ( думал сделать отступы растянутым пикселем гифом. Нифига, не вытягивает картинки по высоте.

В итоге решение такое, что вместо <br> нужно добавлять строку и в ячейку вставлять картинку распорку нужного цвета и размера, стараться поменьше использовать <p> , <span> так как отступов может много появиться)

Надеюсь кому полезна будет инфа

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy