Why do <p> elements show up differently in Rackspace email, versus other email clients such as Gmail, Outlook.com, Outlook (Desktop Application), and Mail (email client that comes with OS X)?
Here is what my <p> elements look like in Gmail, Outlook.com, Outlook, and Mail:
And here is what my <p> elements look like in Rackspace webmail:
Here is what the code inside of my email looks like:
<p>TEST LINE BREAKS</p>
<p>TEST LINE BREAKS</p>
<p>TEST LINE BREAKS</p>
<p>TEST LINE BREAKS</p>
I tried using this application to normalize my email, but it still does not look the same on Rackspace: http://premailer.dialect.ca/
How could I get the line breaks to appear in the Rackspace email?
Different email clients have different default styles for certain tags (like web browsers). In this case, seems Gmail, Outlook.com, Outlook, and Mail give an unstyled <p> tag a small bottom margin, whereas Rackspace mail does not.
This can be reset by defining an explicit margin. Using an inliner like premailer works just fine, though inlining by hand is more straight forward.
<p style="margin: 0 0 10px;">TEST LINE BREAKS</p>
<p style="margin: 0 0 10px;">TEST LINE BREAKS</p>
<p style="margin: 0 0 10px;">TEST LINE BREAKS</p>
<p style="margin: 0 0 10px;">TEST LINE BREAKS</p>
Related
I am using phpmailer to send an email with a button that has a link to another page. For some reason it works almost everytime, except with one specific client of mine. Apperantly his email has is hotmail or outlook.
What happens in this case is that the button comes with a blanked link.
The following peace of code might help:
$mensagem .= '<br><div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="8%" stroke="f" fillcolor="#b1cef1">
<w:anchorlock/>
<center>[enter image description here][1]
<![endif]-->
<a href="http://conazweb.com.br/follow-up/'.$opcao1_file.'"
style="background-color:#b1cef1;border-radius:3px;color:#ffffff;display:inline-block;
font-family:sans-serif;font-size:15px;font-weight:bold;line-height:40px;text-align:center;
text-decoration:none;width:300px;margin-left: 15%; margin-right: 15%;-webkit-text-size-adjust:none;">COMPRAR VIA CONAZ</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>';
By doing a code inspection on the button on the case that the problem is occuring I got the following code:
https://www.dropbox.com/s/dtyhtrvdk0nas5d/Inspection%20button.png?dl=0
This is ancient Microsoft VML, essentially nothing uses it any more, and support has even been dropped from Internet Explorer. If you want links to work, use plain links, which you can style to look like buttons.
In my ColdFusion program I create email (HTML/CSS) for one or many recipients, and place it in a .cfm file. The email is nicely formatted. When I run the saved file as a program, the cfmail tag sends the email along to whomever, and that is all working. However, along the way, my formatting gets lost. I understand that there is no reason for my local CSS to be functioning when the email gets to its target. But it would be nice if I could preserve the formatting I started with.
Does anyone have a suggestion about how I might do this.
If you're not including the attribute type="html" in your cfmail tag, that could be affecting the formatting of your email. Also, within the cfmail tag, embed your style within in addition to your content. For example:
<cfmail from="foo#bar.com" to="foobar#bar.com" subject"test" server="mymailserver" type="html">
<html>
<head>
<style>
.test { color: ##cc0000; }
</style>
</head>
<body>
<div class="test">This email is in red</div>
</body>
</html>
</cfmail>
Styling emails can be tricky as it's different across clients - there are whole blog articles devoted to this. For example, styles in the head section get ignored in some clients and recognised in others. Sadly, inline styles seems to be the "best" approach.
There is a good overview on the campaign monitor website of what works if which clients:
https://www.campaignmonitor.com/css/
Mailchimp have a handy tool which will inline styles for you based on your HTML/CSS:
http://templates.mailchimp.com/resources/inline-css/
It's also worth including a plain text version for maximum compatibility. You can do that like this:
<cfmail to="someone#somewhere.xyz"
from="me#here.xyz"
subject="Hello!"
type="html">
<cfmailpart type="text/plain" wraptext="60">
Hello,
This is plain text version
</cfmailpart>
<cfmailpart type="text/html">
<h3>Hello</h3>
<p>This is <b style="color:red;">HTML</b> version</p>
</cfmailpart>
</cfmail>
When sending an HTML e-mail, is there any sense in using the <title> tag? In the PHP Manual, for instance, they use such a tag in their main sample code. However, I see no reason why an e-mail client would use this title and not the Subject from the e-mail. Is there any reason to set this tag?
I've been looking into this myself as I'm writing a PHP mailing list manager script that uses the sendmail() function.
The script allows the admin to create and send multiform emails (both text and html versions).
After much testing I have found that some email servers appear to have issues with the title tag (<title></title>).
I created a test email and sent it to 5 of my email address, my #blueyonder.co.uk email failed to arrive but the 4 others had no problems.
After a process of elimination it turned out that the #blueyonder.co.uk mail servers did not like the title tags in the html part of the email message, when I removed the tag the email arrived no probs.
Very strange!
The only use I would see is that some clients, like Outlook, allow you to view an email in a browser for better rendering. It would then be a plus to have the html title tag set.
(Old question, I know ;) )
My experience is that some mail clients will display the <title> tag in their email preview and some won't. Some clients preview will be "Subject + <title> + Preheader" and some will only be "Subject + preheader", so that creates an inconsistent experience.
Because of that, I found it's better to only use a preheader.
For completion's sake, the "Preheader" is a hidden text form the body that is only used in the preview, for example, something like...
<div style="display: none; max-height: 0px; overflow: hidden;">
Insert hidden preheader text here
</div>
Is it possible that several mail applications (e.g. Hotmail, Thunderbird, OSx Mail) replace the whole <img> tag?
In the generated newsletter i have e.g.:
<img style="padding: 0px 10px 0px 0px; outline: none; " class="editor-img" src="/upload/11/2_5.jpg" alt="image" width="165" height="107">
and in the received newsletter i got something like:
<img src="foo" border="0">
Can someone explain me that and how i can prevent this?
Thanks
Yes this is absolutely possible. For instance T-Online in Germany exchanges images ending on .php with a dummy image. Many webmailers parse and adapt email code before it is finally rendered in the inbox. Like Gmail tel:-links numbers of which it thinks it's a phone number. In your case, the relative path doesn't make any sense. Try an absolute image path like src="http://www.YOURDOMAIN/upload/11/2_5.jpg".
I'm trying to place a page break into an HTML email using the following code but this does two things when I view the email in Outlook.
It ignores the line breaks in the 2nd table (only a problem with Outlook) and it does not page break (a problem in all non-web based email clients)!
Does anyone know how I can code this?
<table>
<tr>
<td>test<br>test<br>test</td>
</tr>
</table>
<table style="page-break-before:always;">
<tr>
<td>me<br>me<br>me</td>
</tr>
</table>
send them a document instead of HTML, or link them to a page that contains your email HTML
I think you'll end up pulling out too much hair trying to get what you're doing to work correctly, especially as newer versions of email clients come out.