i have this little but annoying issue displaying text content in the body of the mail. From a form page i send a mail HTML5 formatted.
This is what i sent via mail() php function:
<html>
<head>
<style type='text/css'>
body{
font-family:'Lucida Grande', Arial;
color:#333;
font-size:15px;
}
.div1{ display:inline; }
.row {margin-bottom:5px}
.background {background-color:#ffe508; padding:5px; font-size:18px}
</style>
</head>
<body>
<div>
<div class="row">
<div class="div1"><strong>Company:</strong></div><div class="div1">
$company</div></div>
</div>
</body>
</html>
This is what i display on OUTLOOK 2013:
Company:
company_name
It's wrong because i need to display this field on one line as i display fine on WLM
Company:
company_name
i also tried to use table instead of html5 but nothing changes.
Any idea? Thanks
If you don't need the divs, then simply remove them. They don't appear to be doing anything. The line could just be:
<strong>Company:</strong> $company
This means there's nothing which could interfere with this part of the layout.
CSS elements such as float, width and position of <div> doe not work in Outlook.
Div styles not working in Outlook Emails
#ADyson is correct. You don't even need them in your example.
In addition, keep in mind that margin does not work. Margin (capital M) does work. I understand that is not the correct use of Margin, but that's the way Outlook uses it. It's important to remember that email development is not Web development.
https://litmus.com/help/email-clients/outlookcom-margins/
Good luck.
Related
I have recently been developing a newsletter for a client of mine. How ever I can't seem to find good information on what css and html are safe to use in the major mail clients.
I thought that maybe there are people here that have the knowledge and we can create some sort of list of things that work in major mail clients.
This is a list of popular mail clients I borrowed from campaign monitor. (If I forgot somthing please tell me)
Microsoft Outlook
Apple Mail
Hotmail
Yahoo! Mail
Gmail
The question is what tags, attributes, special quirks are there in these major browsers and how can they be easily avoided.
Thanks for the help,
There is a detailed and comprehensive list of CSS support in common mail clients at Campaign Monitor.
http://www.campaignmonitor.com/css/
You can find a comprehensive list of supported and non-supported CSS features for all major email clients at Email Standard Project
A really useful bootstrap for developing HTML emails, which has a ton of discrepancy eliminators is HTML Email Bolerplate
And as a general rule - always use tables and all the old-school HTML tags ( align, center, valign, color etc. ). Some reading on the topic.
Here are a couple of posts to get you started:
http://css-tricks.com/using-css-in-html-emails-the-real-story/
http://www.sitepoint.com/code-html-email-newsletters/
Here is an email css cheat-sheet. http://intenseminimalism.com/2010/email-css-cheatsheet/
PDF providing table format for CSS Support in different mail clients:
Gives information for Web Clients, Desktop Clients on Different OS and Mobile Mail Clients.
CSS support by Different Email Clients
https://i3.campaignmonitor.com/assets/files/css/campaign-monitor-guide-to-css-in-email-may-2014.pdf?ver=5320&_ga=1.228308635.745708791.1442556968
Gmail already supports the style tag in the head
You can use a subset of CSS selectors to apply styles. Gmail supports
class, element, and id selectors.
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>This text is blue.</p=>
<p>Jerry</p>
</div>
</body>
</html>
And media queries:
You can use standard CSS media queries to adjust the styling of an email to suit the user's current device. Gmail supports queries against the screen width, orientation, and resolution.
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
#media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
I am Sending email form php code and my email message body is HTML
$emailBody=<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#textDiv{
background-image: url("appreciation-'.$imageId.'.jpg");background-repeat: no-repeat;width:595px;height: 842px;color: white;float: center;
}
#p1{
padding-top: 420px;padding-left: 50px;width: 500px;font-size: large;
}
#p2{
padding-top: 30px;padding-left: 50px;width: 500px;font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id="textDiv" align="center" style="font-family: cursive; text-align:center;">
<p id="p1">Hi '.$actReciverName.', you have received Kudos from '.$senderName.' </p>
<p id="p2"><i><u>"'.$comment.'"</u></i></p>
</div>
</center>
</body>
</html>
once the email is sent background image is not displaying in outlook desktop app, but its working fine in Outlook Web mail, how to make it visible in desktop outlook application
Thanks in advance for support
HTML messages are rendered by Word in Outlook, and Word does not support background images. Try to create a table and set its background image.
The other answer isn't entirely correct, and those comments are misleading (at best). Background images do work using bulletproof backgrounds, which utilize VML to create your background.
I just coded an email using transparent gradients as background images inside a hybrid design.
The only client I haven't been able to get this to work 100% for is Dark Mode in version 16 of Outlook for Office 365, but it is still present, just that version of Outlook fills transparencies as white. Many eCommerce clients won't care at all about users who use Dark Mode in Outlook for 365 (v16), but I suggest you check with your Email/marketing team to find out before deciding.
I'm building an app which responds to emails on behalf of my app users. These emails are sent to my users and intercepted by my app to auto-respond to their clients. The emails come from third parties and contain branded formatting.
My PHP app takes the full HTML of the email, stores it in a MySQL table then creates a reply and appends the HTML under a <hr/> at the bottom of the email.
This works and it looks like a reply (which is my intention (although I will build some header detail to make it look more legitimate as if it was replied to in Outlook or similar)).
My problem, however, is that this method hurts the reply formatting - it seems to take on styles like line-height from the original email HTML at the bottom of the reply.
Thus my question is, how do I create a reply email? Do do what I'm doing and style my reply better, or do I need to do more with the complete original, not just the HTML output. And is it even ok to have to HTML tags in an email?
I would love it if the answer was something like: extract the X from the email and build a reply with the opensource Y library :)
EDIT: Email examples as requested
This third party email contains a head that looks like this:
<html>
<head>
<style type='text/css'>
body{font-family: arial,helvetica,sans-serif;}
a{color: #06c;}
p{margin:0;}
#message{width:600px;margin:0 auto;}
.legal{margin-top:2em;}
.footer{margin-top:1em;padding:5px;background:#999999;color:#fff;}
.footer a{color:#fff;}
.senderName,.label{font-weight:bold;}
.link,.label,.hint{margin-top: 20px;}
.header-separator{height:4px;background-color:#e4002b;width:100%;margin-top:17px;}
tr,td{vertical-align:top;text-align:left;}
img{border:0;}
${css!""}
</style>
</head>
<body>
<div id='message'>
...
And my user email templates (built in TinyMCE) will look something like this:
<p><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14pt;">Dear [name],</span></p>
<p><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14pt;">Thanks for your enquiry
...
When I send the email to the email service it's as simple:
$emailreply = $userTemplate . '<hr/>' . $originalEnquiry;
Surely, that's not good enough? Also, this is the email that I mentioned where line-height is being affected - so my user templates are not sending as designed.
It's kinda rare the case on the 3rd party email, having separated <style > tag when the usual procedure on HTML email development is to set up all styles inline.
It's kinda logical that those styles (from the <style > tag are damaging your new code, The best option here is to make all that styling (from the 3rd party email) inline, so you can remove the <style > tag, keeping both email styling separated.
As you said PHP App, I think you can use some of the following:
https://github.com/tijsverkoyen/CssToInlineStyles
https://github.com/jjriv/emogrifier
https://github.com/emilsundberg/Laravel-HTML-email-inliner/blob/master/src/Emil/Inliner/vendor/Premailer/Premailer.php
And make sure, if the chosen one of the above tools doesn't remove the <style>...</style> tag, remove it by yourself (you can do it using regular expressions).
Hope this helps, good luck
I'm building HTML email templates for a CMS and am wondering if it is possible to define what the preheader of the email is.
The email preheader is the portion of the email that appears right after the email subject on your email provider. Very useful on mobile devices, the user catches a glimpse of what the email is about. It is usually the first text content of the email that defines it.
Currently, on my HTML email design I have a header template, body template and a footer template. And my preheader gets defined by the header template; the first text content that appears is in the header and is the website name/logo, creating redundancy in the email design.
Any ideas of how to get around this?
Sonu Yadav shared the perfect and clever solution to this problem (thanks). And for the sake of documentation, the solution presented on the link shared by Sonu Yadav is below.
Basically, you add the text your want your preheader to be before all content in the <body> tag and use CSS to hide it.
<style>
/* ... */
/*--- Preheader declaration in style block in addition to inline for Outlook */
.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
</style>
</head>
<body>
<!-- PRE-HEADER TEXT -->
<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, & more: 75 text char limit</span>
...
If your logo is the first thing being rendered in your email, the cleanest way (without having to rely on styles) is to place the preheader text in the image alt tag, e.g.:
<img src="https://s3.amazonaws.com/my-assets/logo.png" alt="My preheader text." >
In my (PHP) web app, I have a part of my site that keeps a history of recent searches. The most recent queries get shown in a side box. If the query text is too long, I truncate it and show ellipses. Eg: "My very long query is..."
Currently, I truncate after a certain number of characters. Since the font is not monotype, a query of all I's is more narrow than a query of all W's. I'd like them to all be about the same width prior to the ellipses. Is there a way to get the approximate width of the resulting string so that the ellipses for any given string will occur in about the same number of pixels from the beginning? Does CSS have a way? Does PHP? Would this be better handled by JavaScript?
Here's another take on it and you don't have to live without the ellipsis!
<html>
<head>
<style>
div.sidebox {
width: 25%;
}
div.sidebox div.qrytxt {
height: 1em;
line-height: 1em;
overflow: hidden;
}
div.sidebox div.qrytxt span.ellipsis {
float: right;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
<span class="ellipsis">…</span>
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Short text. Fail!
</div>
</body>
</html>
There is one flaw with this, if the text is short enough to be fully displayed, the ellipses will still be displayed as well.
[EDIT: 6/26/2009]
At the suggestion of Power-Coder I have revised this a little. There are really only two changes, the addition of the doctype (see notes below) and the addition of the display: inline-block attribute on the .qrytxt DIV. Here is what it looks like now...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.sidebox
{
width: 25%;
}
div.sidebox div.qrytxt
{
height: 1em;
line-height: 1em;
overflow: hidden;
display: inline-block;
}
div.sidebox div.qrytxt span.ellipsis
{
float: right;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
<span class="ellipsis">…</span>
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Short text. FTW
</div>
</div>
</body>
</html>
Notes:
Viewed in IE 8.0, Opera 9, FF 3
A doctype is required for IE to get the display: inline-block to work correctly.
If the .qrytxt DIV's overflow occurs on a long word, there is going to be a wide gap between the ellipsis and the last visible word. You can see this by viewing the example and resizing your browser width in small increments. (this probably existed in the original example as well, I just may have not noticed it then)
So again, an imperfect CSS-only solution. Javascript may be the only thing that can get the effect perfect.
[EDIT: 6/27/2009]
Here is another alternative which uses browser specific extensions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.sidebox
{
width: 26%;
}
div.sidebox div.qrytxt
{
height: 1em;
line-height: 1em;
overflow: hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
-moz-binding:url(ellipsis-xbl.xml#ellipsis);
white-space:nowrap;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
Short text. FTW
</div>
</div>
</body>
</html>
Note that in order for the above example to work, you must create the xml file referenced by the -moz-binding rule, ellipsis-xbl.xml. It's should contain the following xml:
<?xml version="1.0" encoding="UTF-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>
<xul:window>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</xul:window>
</content>
</binding>
</bindings>
You could also quite easily use a bit of javascript:
document.getElementByID("qrytxt").offsetWidth;
will give you the width of an element in pixels and even works in IE6. If you append a span containing ellipses to the end of each query a simple logical test in JavaScript with a bit of CSS manipulation could be used to hide/show them as needed.
Does CSS have a way?
No
Does PHP?
No
-
To do that you'd have to get the font metrics for each character, and apply them to all your letters in your string. While you could do this by using a drawing/rendering library like ImageMagick on the server, it wouldn't really work because different browser on different OS's render fonts differently.
Even if it did work, you wouldn't want to do it, because it would also take forever to render. Your server would be able to push 1 page per second (if that) instead of several thousand.
If you can live without the trailing ..., then you can nicely fake it using div tags and css overflow: hidden, like this:
.line_of_text {
height:1.3em;
line-height:1.3em;
overflow:hidden;
}
<div class="line_of_text"> Some long text which will arbitrarily be cut off at whatever word fits best</div>
PHP should be left out of consideration completely due to the fact that even though there is a function designed for measuring fonts, http://www.php.net/imageftbbox , there is no way for PHP to know whether the visitor has a minimum font size setup that is larger than your anticipated font size.
#Robert
what if you put the ellipses in a div with a low z-index so that when it moves to the left (for shorter lines) they get covered up by a background image or something?
it's pretty hacky I know, but hey worth a try right?
edit Another idea: determine the position of the div containing the ellipses with javascript and if it's not pushed all the way right, hide it?