|
Alexander Schmidt
|
January 23, 2015 at 3:11 am
Hi!
I’m trying to send out payment reminders from EE4. They work fine when sending test emails and previewing in Messages, but when sending them it adds a bunch of code before the mail. The mail looks correct – it just adds the code before:
< style type="text/css" style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;"> /* ------------------------------------- Attention! This CSS file is used for generating the final messages that are sent to the attendees and admins. ------------------------------------- */ /* ------------------------------------- GLOBAL ------------------------------------- */ * { margin:0; padding:0; } * { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; } img { max-width: 100%; } .collapse { margin:0; padding:0; } body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; width: 100%!important; height: 100%; } /* ------------------------------------- ELEMENTS ------------------------------------- */ a { color: #2BA6CB;} .btn { text-decoration:none; color: #FFF; background-color: #666; padding:10px 16px; font-weight:bold; margin-right:10px; text-align:center; cursor:pointer; display: inline-block; } p.callout { padding:15px; background-color:#ECF8FF; margin-bottom: 15px; } .callout a { font-weight:bold; color: #2BA6CB; } table.social { /* padding:15px; */ background-color: #ebebeb; } .social .soc-btn { padding: 3px 7px; font-size:12px; margin-bottom:10px; text-decoration:none; color: #FFF;font-weight:bold; display:block; text-align:center; } a.fb { background-color: #3B5998!important; } a.tw { background-color: #1daced!important; } a.gp { background-color: #DB4A39!important; } a.ms { background-color: #000!important; } .sidebar .soc-btn { display:block; width:100%; } /* ------------------------------------- HEADER ------------------------------------- */ table.head-wrap { width: 100%;} .header.container table td.logo { padding: 15px; } .header.container table td.label { padding: 15px; padding-left:0px;} /* ------------------------------------- BODY ------------------------------------- */ table.body-wrap { width: 100%;} /* ------------------------------------- FOOTER ------------------------------------- */ table.footer-wrap { width: 100%; clear:both!important; } .footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;} .footer-wrap .container td.content p { font-size:10px; font-weight: bold; } /* ------------------------------------- TYPOGRAPHY ------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; padding-bottom:15px; padding-top:10px; color:#000; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; } h1 { font-weight:200; font-size: 36px;} h2 { font-weight:200; font-size: 30px;} h3 { font-weight:500; font-size: 24px;} h4 { font-weight:500; font-size: 19px;} h5 { font-weight:900; font-size: 16px;} h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;} h4.attendee-name { margin: 10px 0; } .collapse { margin:0!important;} p, ul { margin-bottom: 10px; font-weight: normal; font-size:14px; line-height:1.6; } p.lead { font-size:17px; } p.last { margin-bottom:0px;} ul li { margin-left:5px; padding-bottom: 5px; list-style-position: inside; list-style-type: none; } ul.question-list li, ol.datetime-list li { margin-left:10px; padding-bottom: 5px; list-style-position: inside; list-style-type: none; } li.ticket-name em, li.question-item em {padding-left: 15px;} hr { margin: 10px 0; } /* ------------------------------------- SIDEBAR ------------------------------------- */ ul.sidebar { background:#ebebeb; display:block; list-style-type: none; } #ee-message-preview-container ul.sidebar li { display: block; margin:0; padding:10px 16px;} #ee-message-preview-container ul.sidebar li h5 { text-decoration:none; color: #000; padding:10px 0 20px 0; display:block; margin:0; } ul.sidebar li a.last { border-bottom-width:0px;} ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;} /* --------------------------------------------------- RESPONSIVENESS Nuke it from orbit. It's the only way to be sure. ------------------------------------------------------ */ /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ .container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important; } /* This should also be a block element, so that it will fill 100% of the .container */ .content { padding:15px; max-width:600px; margin:0 auto; display:block; } /* Let's make sure tables in the content area are 100% wide */ .content table { width: 100%; } /* Odds and ends */ .column { width: 300px; float:left; } .column tr td { padding: 15px; } .column-wrap { padding:0!important; margin:0 auto; max-width:600px!important; } .column table { width:100%;} .social .column { width: 280px; min-width: 279px; float:left; } .column-large { width: 550px; margin:0 auto; padding-left: 10px; } /* Be sure to place a .clear element after each set of columns, just to be safe */ .clear { display: block; clear: both; } /* ------------------------------------------- PHONE For clients that support media queries. Nothing fancy. -------------------------------------------- */ @media only screen and (max-width: 600px) { a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;} div[class="column"] { width: auto!important; float:none!important;} table.social div[class="column"] { width:auto!important; } }
|
|
Tony
|
January 23, 2015 at 5:51 am
Hi Alexander,
Have you altered any of your message templates at all?
This often happens when the messages are being marks as spam along the way. The code you can see if because the message is being sent as plain text, most email clients and browsers will do their best then to display the html as best it can.
However, I’m not sure why your test messages don’t do the same.
|
|
Alexander Schmidt
|
January 24, 2015 at 4:46 am
Hi!
I have edited in the mails, yes. However the correct mail is sent to. It’s just shown beneath all the code?
|
|
Tony
|
January 24, 2015 at 9:33 am
Emails can be sent as plain text or HTML. EE emails are HTML emails.
However, if the email is marked as suspicious or suspected spam by any of the mail servers, they will send it on as plain text. When this happens your email client tries its best to display the html content in a sort of safe mode (its not quite as simplistic as that, but you get the idea)
This is what I suspect is happening with your emails.
So ‘the code’ is actually included within all of the EE emails, it is the inline CSS that is applied to the html within the email. However with HTML emails that code is used correctly, plain text emails display it.
For email issues such as this we recommend using a ransaction email service such as Mandrill, you can find more information on those services here:
https://eventespresso.com/wiki/postmark-app-mandrill-transactional-email-handling-services/
With a step by step guide to setting up mandrill available here:
http://blog.mailchimp.com/transactional-email-plugin-for-WordPress/
|
