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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем Alllexey777, 28 авг 2014.

  1. Alllexey777

    Alllexey777 New Member

    Регистрация:
    28 авг 2014
    Сообщения:
    1
    Симпатии:
    0
    Народ, помогите, пожалуйста, в первый раз сделал html письмо, все получилось как надо, но в яндекс почте и в outlook картинка с верхней тенью отображается с отступом в 1px, в остальных почтовиках отображается нормально, подскажите, что нужно изменить, чтобы все отображалось как нужно?

    Код (Text):
    <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>
     

    Вложения:

    • 1.png
      1.png
      Размер файла:
      65,1 КБ
      Просмотров:
      16
  2. -master-

    -master- Well-Known Member

    Регистрация:
    14 янв 2012
    Сообщения:
    629
    Симпатии:
    18
    зачем тут таблицы?
    дивами переверстайте
     
Загрузка...
Похожие Темы - Проблемы Версткой Html
  1. aliaksandr89
    Ответов:
    3
    Просмотров:
    125
  2. Amfion
    Ответов:
    5
    Просмотров:
    122
  3. wowa
    Ответов:
    7
    Просмотров:
    380
  4. John_Tavarez
    Ответов:
    0
    Просмотров:
    338
  5. Валентин Амбер
    Ответов:
    11
    Просмотров:
    347

Поделиться этой страницей