I have created a template in mailchimp programming myself the html with their respective styles. Everything works fine in the mailchip template viewer. But the moment to see the result in mail clients, some styles are ignored. In the template I am using an image as a background and some text and div elements superimposed on it, using absolute positions. In mail clients, these positions are ignored and the content is displayed as a single column. Does anyone have any solution to this?
Thanks in advance.
I attach the implemented code.
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xxxxxxxxxxxxxxxxxxxxxx</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
</head>
<body>
<div>
<div id="coverImg" style="background-color:black;opacity:.15;width:650px;height:890px;position:absolute;z-index:1;"></div>
<img id="fondoImg" style="position:absolute;z-index:0;width:650px;" src="imageURL1" alt="fa94319f-53fe-4c6a-b34b-8660dfb1ba28.jpg">
<h1 id="tituloTxt" style="position:absolute;z-index:2;font-size:40px;top:27px;left:275px;">
<strong>XXXXXXXXXXXX</strong> <br> XXXXXXXXXX</h1>
<div id="containerText">
<p>XXXXXX: *|NOMBRE|*</p>
<p>XXXXX *|VALORADEUD|*.</p>
<p style="text-align:center;">XXXXXXXXX</p>
<center>
<a href="randomURL</a>
<br>
<br>
<div style="margin-top:50px;">
<h3 class="lista" style="display:inline;">XXXXXX: </h3> <h3 style="display:inline;">
*|CEDULA_RUC|*
</h3>
</div>
<br>
<div style="display:inline;">
<h3 class="lista" style="display:inline;">XXXXXXX: </h3> <h3 style="display:inline;"> *|NOMBRE|*
</h3>
</div>
<br>
<br>
<div style="display:inline;">
<h3 class="lista" style="display:inline;">XXXXXXX: </h3> <h3 style="display:inline;">*|VALORADEUD|*</h3>
</div>
</center>
</div>
<p id="txt1">xxxxxxxxxx,</p>
<p id="txt2">xxxxxxxxxx <br> xxxxxxxxxxxx</p>
</div>
<style type="text/css">
body{
font-family:'PT Sans Narrow',sans-serif;
}
#fondoImg{
position:absolute;
z-index:0;
width:650px;
}
#coverImg{
background-color:black;
opacity:.15;
width:650px;
height:890px;
position:absolute;
z-index:1;
}
#tituloTxt{
position:absolute;
z-index:2;
font-size:40px;
top:27px;
left:275px;
}
#containerText{
position:absolute;
z-index:1;
top:200px;
left:45px;
height:470px;
width:530px;
background-color:white;
padding-left:20px;
padding-right:20px;
text-align:justify;
}
#txt1{
position:absolute;
z-index:1;
color:white;
left:270px;
top:680px;
}
#txt2{
position:absolute;
z-index:1;
color:white;
left:185px;
top:710px;
text-align:center;
font-weight:bold;
}
.lista{
color:red;
}
</style>
</body>
</html>
Been trying to follow this article on making future proof responsive email templates:
https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
What I'm working on looks good in most clients, but Outlook isn't rendering some of the background colors.
Should look like this with gray borders (this is in Gmail):
Outlook 2016, however, looks like the following:
Right now I am just trying to get the gray border to show up. Will figure out why the background image isn't later.
Anyway, here is what I have so far. Any suggestions on how to get this gray background to show up the entire width of email body like it does in Gmail?
<!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" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
<style type='text/css'>
/* Basics */
body {
margin: 0 !important;
padding: 0;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #333333;
}
img {
border: 0;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
.content {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background-color: #7E8083;
}
.webkit {
max-width: 902px;
margin: 0 auto;
}
.outer {
margin: 0 auto;
width: 95%;
max-width: 902px;
background-color: #1D428A;
color: #FFF;
}
.content-area {
background-position: center;
background-size: 100% 100%;
}
.footer {
font-size: 10px;
-webkit-text-size-adjust: 95%;
}
</style>
</head>
<body>
<div class="header" align="center">
<table cellpadding="20">
<tr>
<td>
<img src="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" width="150" alt="The Company Logo">
</td>
</tr>
</table>
</div>
<div bgcolor="#7E8083" class="content">
<div class="webkit">
<!--[if (gte mso 9)|(IE)]>
<table width="902px" align="center">
<tr>
<td>
<![endif]-->
<table height="381" class="outer" align="center">
<tr align="center">
<td background="https://marketing-image-production.s3.amazonaws.com/uploads/8.gif" align="center" class="content-area">
[content here]
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</div>
<div class="footer" align="center" size="10">
<p>If you would like to unsubscribe and stop receiving these emails
click here. We encourage you not to do so to ensure you receive important emails related to your account.</p>
</div>
</body>
</html>
You can try bulletproof background images:
<td background="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" bgcolor="#1D428A" width="120" height="92" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
<v:fill type="tile" src="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" color="#1D428A" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
[content here]
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
See: https://backgrounds.cm/
There are a couple of things that we are generally asked that unfortunately are just not possible in Outlook and therefore... Unfortunately Outlook has lots of limitations on it's CSS support.
A good guide for CSS support for the most email clients can be found here: https://www.campaignmonitor.com/css/
Outlook does not really work with <div>. You can use it, but don't be surprised when it doesn't work as expected.
Outlook does not work with background images the way you are using them. #caiovisk has an example that I suggest you pursue.
As far as background colors go, try using: background: #ff0000; instead of background-color: #ff0000;. `bgcolor="#ff0000" should always work on tables. This will also fix your issues with Android.
width="902px" is not going to work. Try `width="902" for Outlook instead. I do not understand why you're specifying a width that is 322 pixels wider than will show up in the Outlook viewport. Consider a narrower email.
My suggestion is to stop developing the way you're pursuing emails. Find a decent responsive email template and follow that as an example. The direction you're headed has so many issues I can see that you're just asking for trouble.
Good luck.
Hi I'm trying to make a table responsive and I need the responsive and stack within each other like a table row
Html
<html >
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="teststyles.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link href="media-queries.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr>
<td>
<p> Stuff </p>
</td>
<td >
<p> Stuff </p>
</td>
<td >
<p> Stuff </p>
</td>
</tr>
</table>
</body>
</html>
CSS
table{
width: 990px;
margin: 0 auto;
}
tr{
display:table;
width:100%;
}
td{
display:table-row;
background:#efefef;
}
So I thought table-row makes an element behave as table row but for some reason its not stacking like one. Any ideas or tips?
EDIT:
Looks like this when I open it on regular html but when I open it on fiddle it's great
You need a doctype in your HTML file. The first line should be:
<!DOCTYPE html>
I have this CSS, however the elements need a unique class, or they interfere with the CSS used to create the website I'm using it on.
img{
display:inline-block;
width:211px;
height:146px;
border:1px solid white;
vertical-align:top;
margin-right:10px;
}
div{
display:inline-block;
width:311px;
}
I need to make them unique classes like:
img.example{
display:inline-block;
width:211px;
height:146px;
border:1px solid white;
vertical-align:top;
margin-right:10px;
}
div.example2{
display:inline-block;
width:311px;
}
So to start with, is that the correct way to make them classes?
If it is, how do I then apply them to the "**" sections of this HTML? The div becomes div.example2 ? How about using the img.example ?
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="css/style.css" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="accordion vertical">
<section id="vertabout">
<h2>Tutor-Led Course</h2>
**<img src="http://bathnes.learningpool.com/draftfile.php/2592/user/draft/826412532/TutorLedCourse.jpg" height="134" width="208" />**
**<div>To view the tutor-led course information, please click here</div>**
<p><strong>IT Courses - Excel 2010 Basic</strong></p>
</section>
<section id="vertservices">
<h2>E-Learning Module</h2>
<p><p><img src="http://bathnes.learningpool.com/draftfile.php/2592/user/draft/826412532/RelatedELearning.jpg" height="146" width="211" /> </p></p>
</section>
</div>
</body>
</html>
Apologies, but I am terrible with CSS and HTML :)
That is the proper way to select a tag with a class, but you need to add the classes.
<img src="http://bathnes.learningpool.com/draftfile.php/2592/user/draft/826412532/TutorLedCourse.jpg"
height="134" width="208" class="example"/>
<div class="example2">To view the tutor-led course information, please click here</div>
I'm generating a html email that uses an internal stylesheet, i.e.
<!doctype html>
<html>
<head>
<style type="text/css">
h2.foo {color: red}
</style>
</head>
<body>
<h2 class="foo">Email content here</foo>
</body>
</html>
When viewed in Gmail it seems all the styles in the internal stylesheet are ignored. It seems Gmail ignores all styles other than inline rules, e.g.
<h2 style="color: red">Email content here</foo>
Is this my only option for styling HTML emails when viewed with Gmail?
Use inline styles for everything. This site will convert your classes to inline styles: http://premailer.dialect.ca/
The answers here are outdated, as of today Sep 30 2016. Gmail is currently rolling out support for the style tag in the head, as well as media queries. If Gmail is your only concern, you're safe to use classes like a modern developer!
For reference, you can check the official gmail CSS docs.
As a side note, Gmail was the only major client that didn't support style (reference, until they update anyway). That means you can almost safely stop putting styles inline. Some of the more obscure clients may still need them.
Gmail started basic support for style tags in the head area. Found nothing official yet but you can easily try it yourself.
It seems to ignore class and id selectors but basic element selectors work.
<!doctype html>
<html>
<head>
<style type="text/css">
p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}
</style>
</head>
<body>
<p>Email content here</p>
</body>
</html>
it will create a style tag in its own head area limited to the div containing the mail body
<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>
I agree with everyone who supports classes AND inline styles. You might have learned this by now, but if there is a single mistake in your style sheet, Gmail will disregard it.
You might think that your CSS is perfect, because you've done it so often, why would I have mistakes in my CSS? Run it through the CSS Validator (for example http://www.css-validator.org/) and see what happens. I did that after encountering some Gmail display issues, and to my surprise, several Microsoft Outlook specific style declarations showed up as mistakes.
Which made sense to me, so I removed them from the style sheet and put them into a only for Microsoft code block, like so:
<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
This is just a simple example, but, who know, it might come in handy some time.
Note that services and tools for sending emails may be able to inline your CSS for you, allowing CSS in <style> tags to work in Gmail.
For instance, if you're sending emails with MailChimp, your CSS from <style> tags will get inlined automatically by default. With Mandrill, you can enable this functionality (although it's disabled by default for performance reasons) by checking the "Inline CSS Styles in HTML Emails" box in the "Sending Defaults" section of the Settings tab:
As others have said, some email programs will not read the css styles. If you already have a web email written up you can use the following tool from zurb to inline all of your styles:
http://zurb.com/ink/inliner.php
This comes in extremely handy when using templates like those mentioned above from mailchimp, campaign monitor, etc. as they, as you have found, will not work in some email programs. This tool leaves your style section for the mail programs that will read it and puts all the styles inline to get more universal readability in the format that you wanted.
I had the same problem while designing a template in Mailjet. Solution of the problem was minified CSS code inside <style> tags.
#shawn did give an example how to use a combination of styling in the head section together with inline styling. Some email clients (Outlook, Gmail, etc.) have tricky things, these can be fixed with css in the head style.
The extra table <table width="580"> is for Outlook to solve 'width' problems and also to center the layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="border:none;" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<base target=_blank href="http://">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="x-apple-disable-message-reformatting"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<title>
</title>
<link href="https://fonts.google.com/specimen/Open+Sans#standard-styles" rel="stylesheet" type="text/css"/>
<style type="text/css">
.ReadMsgBody { width:100%;background-color:#eeeeee }
.ExternalClass { width:100%;background-color:#eeeeee }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100% }
a[x-apple-data-detectors] { color:inherit !important;text-decoration:none !important;font-size:inherit !important; font-family:inherit !important;font-weight:inherit !important;line-height:inherit !important }
div[style*="margin: 16px 0"] { margin:0 !important }
body { margin:0;padding:0;font-family:'Open Sans','Verdana',Geneva,sans-serif;-webkit-text-size-adjust:none;-ms-text-size-adjust:none }
#outlook a { padding:0 }
.yshortcuts a { border-bottom:none !important }
table,td { mso-table-lspace:0pt;mso-table-rspace:0pt }
table,tr,td { border-collapse:collapse }
tbody { width: 100% }
p,a,li,blockquote { mso-line-height-rule:exactly }
li { mso-margin-top-alt:0;mso-margin-bottom-alt:0 }
#media screen and (min-width: 600px) {
table.container {width: 580px !important; margin: 10px auto !important }
div.fullwidth { width: 580px !important }
div.halfwidth { width: 290px !important }
}
</style>
<!--[if gte mso 11]>
<style type="text/css">table {border-spacing: 0;}table td {border-collapse: separate;}</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css">table{border-spacing:0} table td{border-collapse:collapse}</style>
<!--<![endif]-->
<!--[if gte mso 15]>
<xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
<!--[if gte mso 9]>
<xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body bgcolor="#ffffff" style="width:100%; margin:0px; padding:0px; border:0px; -webkit-text-size-adjust:100%">
<!-- BODY TABLE -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:100%; border-collapse:collapse; border-spacing:0; margin:0 auto; padding:0; border:0; background-color:#ffffff">
<tr>
<td width="100%" align="center" valign="top" style="padding:0px !important; border-collapse:collapse; border-spacing:0; border:0px; text-align:center; vertical-align:top; -webkit-text-size-adjust:100%;">
<!-- WRAPPER TABLE -->
<!--[if (gte mso 9)|(IE)]>
<table width="580" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<table class="container" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; max-width: 580px; margin: 0 auto; background-color: #ffffff; border:1px solid #e7e7e7">
<tr>
<td class="font0" align="center" style="padding: 0 !important; font: normal 0px/0px sans-serif !important; font-size: 0px !important; border-collapse: collapse; border-spacing: 0; border: 0; text-align: center; vertical-align: top;">
<!-- EACH CONTENT ROW AS BELOW -->
<!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<div class="fullwidth" style="width: 290px; display: inline-block; vertical-align: top;">
<table width="100%" style="border-collapse: collapse; border-spacing: 0;">
<tr>
<td style="padding: 20px 10px 0px 10px; font: normal 12px/16px sans-serif; color: #555454; text-align: left; -webkit-text-size-adjust: 100%;">
YOUR CONTENT HERE
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
<!-- END WRAPPER TABLE -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
<!-- END BODY TABLE -->
</td>
</tr>
</table>
</body>
</html>