Подтвердить что ты не робот

Абсолютное позиционирование в почтовых сообщениях gmail

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

Я пытаюсь сделать это с абсолютным позиционированием. Некоторым системам электронной почты это нравится. Некоторые ненавидят его. Gmail ненавидит его.

Мы используем MailChimp для кампании. Вот полный источник письма. После этого всего лишь фрагмент, который не работает.

<html> 
    <head> 
        <!-- This is a simple example template that you can edit to create your own custom templates -->
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
        <title>*|MC:SUBJECT|*</title> 

    <style type="text/css">body{background-color:#bab145;text-align:center;}#layout{border:5px solid #999999;background:#ffffff;margin:10px auto;text-align:left;}#header{background-color:#cccccc;padding:0px;color:#333333;font-size:30px;font-family:Georgia;text-align:left;}#content{font-size:13px;color:#4d4d4d;font-family:Helvetica;line-height:1.25em;padding:10px 30px;}.primary-heading{font-size:28px;font-weight:bold;color:#8b0000;font-family:Georgia;line-height:150%;margin:25px 0 0 0;}.secondary-heading{font-size:20px;font-weight:bold;color:#000000;font-style:normal;font-family:Georgia;margin:25px 0 5px 0;}#footer{background-color:#eeeeee;border-top:0px none #ffffff;padding:20px;font-size:10px;color:#333333;line-height:100%;font-family:Verdana;}#footer a{color:#800000;text-decoration:underline;font-weight:normal;}a,a:link,a:visited{color:#800000;text-decoration:underline;font-weight:normal;}</style></head> 
    <body style="background-color: #bab145;text-align: center;"> 
        <table id="layout" border="0" cellspacing="0" cellpadding="0" width="600" style="border: 5px solid #999999;background: #ffffff;margin: 10px auto;text-align: left;"> 


            <tr> 
                <td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
    <div style="position: absolute; top: 110px; left: 130px;">
        *|FNAME|* *|LNAME|*</div>
    <div style="position: absolute; top: 140px; left: 130px;">
        GetFreePellets.com</div>
    <div style="position: absolute; top: 166px; left: 130px;">
        $100</div>
    <div style="position: absolute; top: 200px; left: 370px;">
        *|COUPONCODE|*</div>
</div>
</td></tr> 

            <tr> 
                <td id="footer" style="background-color: #eeeeee;border-top: 0px none #ffffff;padding: 20px;font-size: 10px;color: #333333;line-height: 100%;font-family: Verdana;"> 
                    <p><a href="*|ARCHIVE|*" class="adminText" style="color: #800000;text-decoration: underline;font-weight: normal;">view email in browser</a> | <a href="*|UNSUB|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Unsubscribe</a> *|EMAIL|* | <a href="*|UPDATE_PROFILE|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Update your profile</a> | <a href="*|FORWARD|*" style="color: #800000;text-decoration: underline;font-weight: normal;">Forward to a friend</a></p> 

                    <p>*|LIST:DESCRIPTION|*</p> 

                    <p>*|HTML:LIST_ADDRESS_HTML|*</p> 
                    <p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.</p> 
                </td> 
            </tr> 
        </table>
        <span style="padding: 0px;"></span>
    <center><table width="95%" style="clear:both;margin:0px !important;padding:0px !important;margin-top:20px !important;border-top:1px solid #999 !important;border-bottom:1px solid #999 !important;" cellpadding="0" cellspacing="0"><tr>
    <td align="left" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:middle !important;text-align:left !important;">
        Sent to *|EMAIL|*.  <a href="*|UNSUB|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Unsubscribe</a> |
        <a href="*|UPDATE_PROFILE|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Update Profile</a> |
        <a href="*|FORWARD|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#03C !important;">Forward to a Friend</a>
    </td>
    <td align="right" style="padding:10px !important;margin:0px !important;color:#666 !important;background:#CCC !important;width:50% !important;border-bottom 1px solid #999 !important;vertical-align:middle !important;text-align:right !important;">
        *|REWARDS|*
    </td>
</tr></table></center></body> 
</html>

И только фрагмент, о котором я беспокоюсь:

<tr> 
                <td id="content" style="font-size: 13px;color: #4d4d4d;font-family: Helvetica;line-height: 1.25em;padding: 10px 30px;"><div style="height:243px; width: 500px; position: relative;">
<img src="http://getfreepellets.com/images/GC_flat.jpg" style="position: absolute;">
    <div style="position: absolute; top: 110px; left: 130px;">
        *|FNAME|* *|LNAME|*</div>
    <div style="position: absolute; top: 140px; left: 130px;">
        GetFreePellets.com</div>
    <div style="position: absolute; top: 166px; left: 130px;">
        $100</div>
    <div style="position: absolute; top: 200px; left: 370px;">
        *|COUPONCODE|*</div>
</div>
</td></tr>

Примечание. Переменные слияния MailChimp - это те вещи между | и |.

Вот образ того, как он выглядит в Entourage. Красная полоса - настоящее имя, поэтому.. ya: Работа с Email http://img.skitch.com/20100804-m91tny1ck75adfibga6cundcxr.jpg

И вот он в gmail (я знаю, что имя не подвергается цензуре): Не работает электронная почта http://img.skitch.com/20100804-rfrb1fejjubqr4id56yq1xihdp.jpg

Любые идеи о том, как получить эту работу в gmail?

4b9b3361

ОТВЕТЫ

Ответ 1

К сожалению, вы не можете использовать position: absolute.

Кроме того, поскольку Outlook использует средство визуализации HTML Word, вы также столкнетесь с проблемами, использующими абсолютное позиционирование.

Большинство электронных писем в формате HTML размещаются с таблицами.

Проверьте это.

Ответ 2

Я бы предложил сделать все это как таблицу (поддержка div не на 100% надежна в почтовых клиентах). Используйте свойства границы, чтобы придать таблице зеленую границу. Вставьте изображение логотипа/баннера в первую строку таблицы (объедините три столбца). Используйте следующие 3 строки для To, From и Amount (со значениями в объединенных втором и третьем столбцах). И используйте последний столбец последней строки для кода купона.

Если вам действительно нужна двойная рамка, вы можете либо обернуть таблицу в div, либо для максимальной совместимости, оберните таблицу в таблицу с 1 столбцом и 1 строкой.

Да, это некрасиво, но почтовые клиенты имеют чрезвычайно багги и/или старые реализации HTML, поэтому сейчас не время или место, чтобы извиваться за уродливый код, не относящийся к web2.0.

См. ссылку, отправленную alex для получения дополнительной информации.

Ответ 3

Это помогло мне: http://blog.rebelmail.com/absolute-positioning-in-email/

Обратите внимание, что это не надежное решение. У меня были проблемы с ним в Outlook и нужно отключить его.

Ответ 4

(Я знаю, что я отвечаю 4 года спустя... но, вероятно, это поможет кому-то...) Если вы внимательно посмотрите, у вас нет фоновых изображений, у вас возможно 10 изображений или более, много цветов фона и сложная таблица.

Нет изображения за текстом. Вы можете разделить свой стол и составить фоновое изображение в виде нескольких фрагментов изображения и сопоставить цвет фона текста с этими изображениями.

Действительно... в этом шаблоне нет "требуемых" фоновых изображений, просто сложная таблица.