Float: Left и Position не работают для кампании по электронной почте

Question

Float: Left и Position не работают для кампании по электронной почте

0

У меня есть весь код, указанный ниже для моей кампании по электронной почте. По какой-то причине атрибут "float" не работает в Gmail и Yahoo, поэтому мне интересно, есть ли способ использовать "float", чтобы он выглядел красиво отформатированным в электронном письме. Благодарю!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="background-color: #f3f4f5; margin:0px;">
    <div style="width:600px; margin:0px auto;">
        <div style="width:100%; float:left; box-shadow: 0 0 12px #CCCCCC;margin-top: 70px;">
            <div style="width:94%; float:left;padding:32px 3%;background-color:#0078ae;">
                <a href="http://realscout.com"><img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/logo.png" style="max-width:100%;">
            </a></div>
            <div style="width:94%; height: 50%; float:left;padding:0px 3%;
            position:relative;
            background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2Y0ZjRmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffffff 0%, #f4f4f4 50%, #ebebeb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f4f4f4), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f4f4f4 50%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f4f4f4 50%,#ebebeb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f4f4f4 50%,#ebebeb 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f4f4f4 50%,#ebebeb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 ); /* IE6-8 */
">
                <h1 style="color: #0078AD;font-family: verdana;font-size: 28px;font-weight: normal;line-height: 28px;margin: 0;padding: 24px 0 12px;">A Real Success Story!</h1>
                <p style="color: #7F8182;font-family: verdana;font-size: 14px;line-height: 24px;margin: 0;padding: 0;width: 45%;">"We LOVE RealScout! Through its simplistic approach of capturing clients to its personalized search criteria, we have been able to connect with lead generated clients better and faster than any other service we have ever used in the past. Within one month we have turned two leads into actual clients in escrow and have about 15 clients using the website on a weekly basis...this is a no brainer, go with RealScout!"</p>
                <a href="http://pro.realscout.com" style="background-color: #56B900;border: medium none;border-radius: 5px;color: #FEFFFF;float: left;font-family: verdana;font-size: 18px;margin: 20px 0 35px;padding: 17px 15px;text-decoration: none;">Your Success Begins Here!</a>
                <img src="http://i43.tinypic.com/2jahngh.jpg" style="margin-top: -306px; margin-left: 15px;">
                <span style=" background-color:#ffffff;color: #0078ad; font-family: verdana; font-size: 14px; position: relative; right:-70px; opacity: 0.8;padding: 3px 3px; text-transform: capitalize;">Heidi and Michael Syltebo
            </span></div>

            <div style="width:94%; float:left;padding:30px 3% 30px;position:relative;background-color:#f8f8f9;">
                <img src="http://www.image-maps.com/m/private/0/rjaq100u38u699nf8ckn583c14_home.png" style="max-width:48%;float: left;margin:0px 4% 0px 0px;">
                <h1 style="color: #0078AE;float:left;font-family: verdana;font-size: 22px;font-weight: normal;margin: 0 0 8px 0;width: 48%;">Social Media Tip</h1>
                <p style="color: #7F8182;float: left;font-family: verdana;font-size: 14px;line-height: 22px; margin: 0;padding: 0;width: 48%;">Generate more leads and increase the traffic to your RealScout search portal by posting your personal links on Facebook, Linkedin, Twitter, etc. and inviting your audience to search with you on RealScout.</p>
                <a href="http://" style="background-color: #06AEEC;border: medium none;border-radius: 5px;color: #FEFFFF;float: left;font-family: verdana;font-size: 18px;margin: 12px 0 0;padding: 20px 25px;text-decoration: none;">Get Your Links</a>
            </div>


                <div style="width:94%; float:left;padding:30px 3% 30px;position:relative;background-color:#f8f8f9;">
                <img src="http://www.image-maps.com/m/private/0/rjaq100u38u699nf8ckn583c14_website-manager.png" style="max-width:48%;float: left;margin:0px 4% 0px 0px;">
                <h1 style="color: #0078AE;float:left;font-family: verdana;font-size: 22px;font-weight: normal;margin: 0 0 8px 0;width: 48%;">New Feature Upgrade!</h1>
                <p style="color: #7F8182;float: left;font-family: verdana;font-size: 14px;line-height: 22px; margin: 0;padding: 0;width: 48%;">Now you can manage your RealScout Website right on RealScout Pro by clicking "Manage My RealScout Website" on your Agent Dashbord.</p>
                <a href="http://www.buzzfeed.com/ryanhatesthis/this-guy-spent-the-last-month-dressing-up-like-local-realtor" style="background-color: #06AEEC;border: medium none;border-radius: 5px;color: #FEFFFF;float: left;font-family: verdana;font-size: 18px;margin: 12px 0 0;padding: 20px 25px;text-decoration: none;">&nbsp;&nbsp;Read More&nbsp;&nbsp;&nbsp;</a>
            </div>



<div style="width:94%; float:left;padding:30px 3% 30px;position:relative;background-color:#f8f8f9;">
                <img src="http://www.image-maps.com/m/private/0/rjaq100u38u699nf8ckn583c14_enhanced-buzz-21288-1387234916-3.jpg" style="max-width:48%;float: left;margin:0px 4% 0px 0px;">
                <h1 style="color: #0078AE;float:left;font-family: verdana;font-size: 22px;font-weight: normal;margin: 0 0 8px 0;width: 48%;">Real Comedy</h1>
                <p style="color: #7F8182;float: left;font-family: verdana;font-size: 14px;line-height: 22px; margin: 0;padding: 0;width: 48%;">Artist and designer Phil Jones spent the last month dressing up as local real estate agents and pasting himself over their bench ads.</p>
                <a href="http://www.buzzfeed.com/ryanhatesthis/this-guy-spent-the-last-month-dressing-up-like-local-realtor" style="background-color: #06AEEC;border: medium none;border-radius: 5px;color: #FEFFFF;float: left;font-family: verdana;font-size: 18px;margin: 12px 0 0;padding: 20px 25px;text-decoration: none;">&nbsp;&nbsp;Laugh More&nbsp;&nbsp;</a>
            </div>



            <div style="width:100%;float:left;position:relative; margin-top: 0px;">
                <a href="https://itunes.apple.com/us/app/real-estate-by-realscout-search/id744305884?mt=8"><img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/new.png" style="margin:-6px 0px 0px -6px;">
                </a><a href="https://itunes.apple.com/us/app/real-estate-by-realscout-search/id744305884?mt=8"><img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/slider.jpg" style="float: left;margin-top: -119px;width: 100%;">
                <div style="background-color: #FFFFFF;bottom: 45px;float: right;margin: -140px 0 0;padding: 15px 25px;width: 41%;">
                <h1 style="color: #06AEEC;float: left;font-family: verdana;font-size: 16px;font-weight: normal;margin: 0 0 10px;text-transform: capitalize;width: 100%;">Save Searches Across Devices</h1>
                    <p style="color: #7F8182;float: left;font-family: verdana;font-size: 13px;line-height: 23px; margin: 0;padding: 0;width: 100%;">RealScout is compatible with all your 
desktop and mobile devices.</p>
                </div>
            </a></div>

            <ul style="background-color: #FFFFFF;float: left;margin: 0;padding: 40px 0 0;text-align: center;width: 100%;">
                <li style="float: left;list-style: none outside none; padding: 0 1% 40px;width: 31%;">
                    <img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/border_bg.png" style="float: right;margin: 0 -7px 0 0;">
                    <img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/icon1.png" style="height: 49px;">
                    <h1 style="color: #484848;font-family: verdana;font-weight: normal;margin:10px 0;font-size: 18px;">30 Days Free</h1>
                    <p style="color: #BCBCBC;font-family: verdana;font-size: 12px;margin:0px 0px 10px;">Refer 2 Realtors and get an extra 30 days free!*</p>
                    <a href="mailto:[email protected]" style="color: #0881B4;font-family: verdana;font-size: 12px;text-decoration: none;margin:10px 0px;">Referring is easy - Try it now!</a>
                </li>
                <li style="float: left;list-style: none outside none; padding: 0 1% 40px;width: 31%;">
                    <img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/border_bg.png" style="float: right;margin: 0 -7px 0 0;">
                    <img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/icon2.png" style="height: 49px;">
                    <h1 style="color: #484848;font-family: verdana;font-weight: normal;margin:10px 0;font-size: 18px;">Contact Us</h1>
                    <p style="color: #BCBCBC;font-family: verdana;font-size: 12px;margin:0px 0px 10px;">We're here to help answer your questions.</p>
                    <a href="mailto:[email protected]" style="color: #0881B4;font-family: verdana;font-size: 12px;text-decoration: none;margin:10px 0px;">Reply or Call (650) 397-6500</a>
                </li>
                <li style="float: left;list-style: none outside none; padding: 0 1% 40px;width: 31%;">
                    <img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/icon3.png" style="height: 49px;">
                    <h1 style="color: #484848;font-family: verdana;font-weight: normal;margin:10px 0;font-size: 18px;">FAQ</h1>
                    <p style="color: #BCBCBC;font-family: verdana;font-size: 12px;margin:0px 0px 10px;">Have other questions?</p>
                    <span href="support.realscout.com" style="color: #0881B4;font-family: verdana;font-size: 12px;margin:10px 0px;"><a href="http://support.realscout.com" style="color: #0881B4;font-family: verdana;font-size: 12px;text-decoration: none;margin:10px 0px;">Visit our support center for FAQ and video tutorials.</a></span>
                </li>


        </ul></div>
        <p style="color: #0078AD;float: left;font-family: verdana;font-size: 12px;margin: 50px 0 15px;text-align: center;width: 100%;">*Recieve an extra 30 days FREE when you refer 2 Realtors who sign up on RealScout!</p>
        <span style="color: #A2A2A3;float: left;font-family: arial;margin: 0 0 35px;text-align: center;width: 100%;font-size: 14px;">Copyright 2014 RealScout. All Rights Reserved. <a href="#" style="color: #A2A2A3;">Unsubscribe</a></span>
    </div>
</body>
</html>

Bryan 18 фев. 2014, в 06:31

Источник

0

Добро пожаловать обратно в адские макеты таблиц HTML ... Обширные тесты Campaign Monitor должны быть полезны: campaignmonitor.com/css И Mailchimp, рекомендованный ответом №1, здесь тоже.
FelipeAls 18 фев. 2014, в 05:27

Теги:

html

css

css-float

mailchimp

2 ответа

Ещё вопросы

Добро пожаловать обратно в адские макеты таблиц HTML ... Обширные тесты Campaign Monitor должны быть полезны: campaignmonitor.com/css И Mailchimp, рекомендованный ответом №1, здесь тоже.

Deborah · Answer 1 · 2014-02-18T04-11-00.000Z

Многие почтовые клиенты по-прежнему выделяют всплывающие окна, отрицательные поля и любые CSS, которые включены в главный тег. Некоторые также добавляют свой собственный CSS, который может заменить все или часть вашего. Лучшее, что вы можете сделать, это запланировать будущее для разработки электронных писем, которые могут грамотно ухудшаться в браузерах, которые не поддерживают или не поддерживают полностью CSS, а также проверяют, тестируют, тестируют. Кроме того, есть несколько хороших шаблонов писем. Mailchimp - как отмечают другие - отличный ресурс.

Для поплавков перед попыткой таблицы попробуйте добавить "text-align: left;" к родительскому элементу. Это может привести к правильному выравниванию.

Если вам нужно переместиться на таблицы, вы можете добавить классы в ячейки, а в голове установите td для отображения в виде встроенных блоков с поплавками.

(В стороне, jsFiddle поможет другим увидеть, как ваш код ведет себя и настраивает его, что облегчает предоставление точного ответа.)

Joseph · Answer 2 · 2014-02-18T02-49-00.000Z

Путь вокруг поплавков - обращение к таблицам.

Если вам нужны некоторые примеры, вы можете проверить шаблоны Mailchimp

У них даже есть классные отзывчивые шаблоны.

Это также может помочь вам понять поддержку электронной почты для css... http://templates.mailchimp.com/resources/email-client-css-support/

** Примечание. Я не хочу продвигать Mailchimp, поскольку я не являюсь аффилированным лицом, но у них есть хорошие ссылки, когда дело касается электронной почты