email css formatting

[bottyz]

hi all,


I have an issue with emails ariving unformatted. I have had a look through the forums and tried the various methods posted but am still having no joy.

All i have changed are the css codes in the email templates, which are not being applied. I dont think they were applied before the changes either tbh.

I have tried smtp and smtpauth along with all the other settings there, although qmail and sendmail don't work on my host. I prefer php to send emails as my main website is configured to send emails via php which do arrived formatted correctly. So i doubt my server is stripping html unless zen cart has a different way of setting up emails.

Is there anything else i can try? I'm running 1.3.9a

Any help would be much appreciated. Thanks

[DrByte]

When you say the emails "arrive unformatted", what exactly do you mean? Do they contain graphics and colors but have layout problems? Or are the emails actually just text-only messages?

Zen Cart only sends HTML messages if you have HTML enabled and the customer has selected HTML as their email format preference. Otherwise it sends the text-only version.

[bottyz]

Hi Dr Byte,

Sorry, i should of tried to explain in further detail.

I do have html emails, mime etc all enabled and i signed up as a customer myself with html enabled.

After further probing the emails appear to be arriving ok to some email addresses and unformatted to others. For example, the emails arrive fine to my outlook account at work, and arrives wrong to my gmail.

When i say unformatted, divs and breaks appear to there still, but there is no css formatting at all, not even the class= parts within the div tags. I can't see any html/body tags arriving either. I want to have the text white with a black background for example, which keys in with my website design and other emails. But the emails are arriving white with black text obviously due to the missing css.

I know that usually sending emails via php mail function from the main part of my website using my version of a php contact form or email script, works fine across most email systems, such as gmail, hotmail, outlook etc.

If this is something you can't help me with could you help point me in the right direction so that i can look to modify/change the mail send function in one of the core files so it closer matches mine? If its allowed that is. Hopefully then i can fix my problem and if it helps, release the code for you to browse over? Even if i don't fix the issue i can at least say i tried.

[schoolboy]

One has to consider what the settings are on a visitor's computer. If I set my MS Outlook to bring emails in ONLY as text, then that is how they will come in - irrespective of what YOU do on your side.

So the ABSOLUTE control of how emails are received rests with the person receiving them.

Because YOU have no control over what I set my email client to do, you have to make sure that your system sends mail in BOTH formats, so that when it arrives on my machine, it will display the information regardless of whether I have chosen HTML or TXT as my preferred display.

ZC is configured to do just this, so it is not a good idea to try to FORCE html by removing the txt generators from the code.

The best you can do is set all your settings in ZC admin as desired, and then TEST the receipt of mail in both TXT and HTML, to make sure that either way, the messages are going through.

[bottyz]

One has to consider what the settings are on a visitor's computer. If I set my MS Outlook to bring emails in ONLY as text, then that is how they will come in - irrespective of what YOU do on your side.

So the ABSOLUTE control of how emails are received rests with the person receiving them.

Because YOU have no control over what I set my email client to do, you have to make sure that your system sends mail in BOTH formats, so that when it arrives on my machine, it will display the information regardless of whether I have chosen HTML or TXT as my preferred display.

ZC is configured to do just this, so it is not a good idea to try to FORCE html by removing the txt generators from the code.

The best you can do is set all your settings in ZC admin as desired, and then TEST the receipt of mail in both TXT and HTML, to make sure that either way, the messages are going through.

Hi Schoolboy,

It was never my intention to force the html email format, just to get it to display correctly when it has been asked for. The text emails are fine and not in question. I like the option to have both.

I just want to be able to receive the html versions as well as i do when i use my own script, whether it be to gmail or outlook etc..

I know there will always be a difference in the formatting depending on many factors such as clients computer, software, servers, etc... But the fact still remains that the css formatting is missing on certain email systems which normally accept and are set to use html and css formatting.

It is quite important to me that i can try to keep things consistent.

[DrByte]

After further probing the emails appear to be arriving ok to some email addresses and unformatted to others. For example, the emails arrive fine to my outlook account at work, and arrives wrong to my gmail.

Okay, so the stripping of content is happening by the email service *receiving* your emails.
That is presumably because they don't trust your content.
And that is often because you're sending it unauthenticated (PHP often sends email as user "nobody", which is the same technique spammers use, and thus often gets flagged as untrusted).
If you switch to using SMTPAUTH then your emails will be sent from an actual user of an authenticated email service, and the receiving system will be able to probe for MX validation when checking whether the content is trustworthy. (The concepts related to that are in the docs I linked you to earlier.) Thus the emails are more likely to show up in their full context.

Do keep in mind that webmail services DO alter your email content to suit their needs. Remember, in those cases the content is fitting inside existing <html> and <body> tags, so you need to follow the rules for appropriate formatting to suit. You can study HTML rules at the w3schools website.

[bottyz]

Hi Dr Byte,


Sorry to wake up an old thread but i never solved it. I have finally managed to correct some host problems and now can send and receive using smtpauth. Although when emails are sent to gmail (one example, some work better than others) the formatting is still removed.

Am i right to believe that i'd never be able to correct this due to gmail being the problematic factor?

Although as i have mentioned previously, sending an email from a contact form based within my main website, gmail formats the email perfectly and thats using php mail function. It seems strange i'm not able to obtain a similar result using php mail function or any other method i have available to me, within zen-cart. I must be formatting the template incorrectly or something...

The following is a copy of the email source code (once sent) to and opened from gmail:

<div>
<div>
<img src="http://www.website.com/images/emails/header.jpg" alt="Website Logo">
</div>
<div>
    <div>Dear BottyZ
</div>
<div>We wish to welcome you to our online shop.</div>
<div>You have successfully registered and now have access to our secure online shopping area. This facility will allow you to shop, view details of completed orders and even add items to your online cart, which will remain there until you remove them or check out</div>
<div>For help with any of our online services, or advice on your Lighthouse products, please email: <a href="mailto:[email protected]" target="_blank">[email protected] </a>
<br><br>
Sincerely,<br>
<br>
Website Customer Support Team<br>
<br>
<a href="http://www.website.com/shop/" target="_blank">http://www.website.com/<wbr>shop/</a><br>
<br>
</div>
</div>
<br>
<div>
<div>This email address was given to us by you or by one of our customers. If you did not signup for an account, or feel that you have received this email in error, please send an email to <a href="mailto:[email protected]" target="_blank">[email protected] </a>
</div>
<br>
<br>
</div>
<div><img src="http://www.website.com/images/emails/emailfooter.png"></div>
</div>

Whereas the email html template looks like:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=$CHARSET" /> 
<base href="$BASE_HREF" />
<style type="text/css">
body {background-color:#000000; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center;}
a:link {color:#ffffff; font-weight: bold;}
a:hover {color:#424242;}
a:visited {color:#ffffff; font-weight: bold;}
.holder {background-color:#000000; border:1px solid #ffffff; font-size:9px; text-align:left; width:779px; margin: auto;}
.header {font-size:10px; padding:0px; width:779px;}
.content {font-size:10px; padding:5px; width:769px;}
.footer {padding:0; text-align:center; margin: auto; width:779px;}
.content-line {padding:5px; font-size:10px;}
.coupon-block { padding: 5px; border: 1px solid #61d0fe; background-color: #424242; }
.coupon-code {font-weight: bold;}
.gv-block { padding: 5px; background-color: #424242; border: 1px solid #61d0fe;}
.gv-code {font-weight:bold;}
.disclaimer {background-color:#000000; text-align: center; font-size:10px; margin:10px auto auto auto; padding:5px; width:768px;}
.disclaimer1 {color:#ffffff; padding:5px;}
.disclaimer1 a:link {color:#ffffff; font-weight:bold;}
.disclaimer1 a:visited {color:#ffffff; font-weight:bold;}
.disclaimer1 a:hover {color:#424242;}
</style>
</head>
<body>
<div class="holder">
<!-- Header Section -->
<div class="header">
<img src="http://www.website.com/images/emails/header.jpg" alt="Website Logo" />
</div>
<!-- Content Section -->
<div class="content">
<div class="content-line">$EMAIL_GREETING</div>
<div class="content-line">$EMAIL_WELCOME</div>
<!--The following only get populated if they're enabled! -->
$COUPON_BLOCK
$GV_BLOCK
<!-- end gv/coupon section -->
<div class="content-line">$EMAIL_MESSAGE_HTML</div>
<div class="content-line">$EMAIL_CONTACT_OWNER<br />$EMAIL_CLOSURE</div>
</div>
<br />
<div class="disclaimer">
<div class="disclaimer1">$EMAIL_DISCLAIMER</div>
<br />
$EXTRA_INFO
<br />
</div>
<!-- Footer Section -->
<div class="footer"><img src="http://www.website.com/images/emails/emailfooter.png"></div>
</div>
</body>
</html>

As you can see from the above, all css gets removed. So if there is anything anybody can suggest that would be worth a try, i'd appreciate it.

Thanks

[llynix]

Gmail will strip out most css that isn't inline.

You can use this inline styler to create emails with the css inline so that it appears ok in gmail.

http://inlinestyler.torchboxapps.com/styler/

[bottyz]

Thank you! Thats a great little tool and appears to do the job :)

Happy Days

[torvista]

last weekend I was looking at this and concluded the only way to get consistancy across email clients (for now) was to forget divs, go back to tables and use as little css (only inline) as possible.