Проблемы С Версткой Html Письма

Alllexey777

New Member
28.08.2014
1
0
#1
Народ, помогите, пожалуйста, в первый раз сделал html письмо, все получилось как надо, но в яндекс почте и в outlook картинка с верхней тенью отображается с отступом в 1px, в остальных почтовиках отображается нормально, подскажите, что нужно изменить, чтобы все отображалось как нужно?

Код:
<html>
<head>
<title>HTML шаблон письма</title>
<meta charset="utf-8">
<style type="text/css">
/* Backgrounds */
.email_background {
width: 640px;
//background: url('http://it-tektura.ru/images/html_message/email_bg.jpg') repeat-y;
}

/* Images */
img {
display: block;
border: none;
}
/* Fonts and Typography */
.footer {
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: #fff;
padding-right: 20px;

}

h1 {
color: #e95f03;
font-family: Arial,Helvetica,sans-serif;
padding: 0;
margin: 0;
font-size: 24px;
font-weight: normal;
text-align: left;
}
h2 {
color: #e95f03;
font-family: Arial,Helvetica,sans-serif;
padding: 0;
margin: 0;
font-size: 18px;
font-weight: normal;
text-align: left;
}
.content {
padding: 0;
margin: 0;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 20px;
text-align: left;
}
</style>
</head>
<body>
<!-- Container Table -->
<table cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#ffffff">
<tr>
<td align="center">

<!-- Email Wrapper Table -->
<table cellpadding="0" cellspacing="0" border="0" width="640">
<tr>
<td>

<!-- Actual Email Content -->
<table cellpadding="0" cellspacing="0" border="0" width="640">
<tr style="padding-left: 20px;">
<td background="http://it-tektura.ru/images/html_message/top_fade1.jpg">
</td>
</tr>
<tr>
<td align="center" background="http://it-tektura.ru/images/html_message/email_bg1.jpg" class="email_background">
<!-- Email Header -->
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td align="center" style="padding-bottom: 20px;" width="350"><a href="http://it-tektura.ru" target="_blank"><img src="http://it-tektura.ru/images/html_message/it-logo.jpg" width="170" height="162" border="0" style="padding-left:20px; padding-top: 20px;" /></a></td>

<td style="padding-bottom: 20px; padding-left: 30px" align="left" width="300" colspan="3"><span> 654007, г. Новокузнецк,<br>
пр. Ермакова, 9а, офис 339<br>
тел.: 8 (3843) 53-97-93<br>
e-mail: office@it-tektura.ru<br>
сайт: <a href="http://it-tektura.ru" target="_blank">it-tektura.ru </span></td>

</tr>

<tr>
<td align="left" colspan="5" style="padding-left: 20px; padding-right: 20px; padding-bottom: 10px;"><span>Компания "АйТиТектура" создана в 2013 году и объединила в себе работу в нескольких основных направлениях в области информационных технологий. Мы стараемся подбирать наиболее подходящие решения для каждого клиента, чтобы уменьшить его расходы и увеличить эффективность от информационных ресурсов </span></td>
</tr>

<tr>
<td align="left" colspan="5" align="left" style="padding-left:20px; padding-right: 20px; padding-bottom: 10px; padding-top: 10px">
<span style="font-size:22px; color:#D03D00">Основные направления деятельности компании</span>
</td>
</tr>
<tr>
<td align="left" valign="top" width="300" style="padding-left: 20px; padding-bottom: 20px;">
<img src="http://it-tektura.ru/images/html_message/1с.jpg">
</td>
<td align="left" valign="middle" colspan="2" style="padding-bottom: 20px;" width="300">
<span>

1) Программы 1С<br>
2) Обновление 1С<br>
3) Обслуживание 1С

</span>
</td>
</tr>
<tr>
<td align="left" valign="top" width="300" style="padding-left: 20px; padding-bottom: 20px;">
<img src="http://it-tektura.ru/images/html_message/bitrix.jpg">
</td>
<td align="left" valign="middle" colspan="2" style="padding-bottom: 20px;" width="300">
<span>

1) Разработка сайтов и интернет-магазинов<br>
2) Сопровождение интернет-ресурсов<br>
3) Редизайн сайтов

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

<tr>
<td align="left" valign="top" width="300" style="padding-left: 20px; padding-bottom: 20px;">
<img src="http://it-tektura.ru/images/html_message/adm.jpg">
</td>
<td align="left" valign="middle" colspan="2" style="padding-bottom: 20px;" width="300">
<span>

1) Администрирование серверов<br>
2) Сопровождение, ремонт и настройка компьютеров<br>
3) Проектирование, монтаж, настройка оборудования СКС

</span>
</td>
</tr>
<tr>
<td align="left" valign="top" width="300" style="padding-left: 20px; padding-bottom: 20px;">
<img src="http://it-tektura.ru/images/html_message/adm.jpg">
</td>
<td align="left" valign="middle" colspan="2" style="padding-bottom: 20px;" width="300">
<span>

1) Подбор необходимого оборудования<br>
2) Монтаж оборудования на объектах<br>
3) Гарантийное и постгарантийное обслуживание

</span>
</td>
<td width="50" style="padding-bottom: 20px;">

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

<tr>
<td>
<img src="http://it-tektura.ru/images/html_message/bottom_fade1.jpg" width="640" border="0" height="28" />
</td>
</tr>
<tr>

</table>
<!-- End Actual Email Content -->
</td>
</tr>
</table>
<!-- End Email Wrapper Table -->

</td>
</tr>
</table>
<!-- End Container Table -->
</body>
</html>
 

Вложения

  • 65.1 КБ Просмотры: 16