I am building an HTML email campaign using Mailchimp and my own HTML. I have heard that to build a successful HTML email you must focus on using tables, and use inline CSS. I have removed all padding from my styles and added in 0 measure to margin, padding, border and outline tags. Any suggestions guys? Really stuck with this.
<body style="background:blue; margin:0; padding:0; border:0; outline:0;">
<div id="wrap" style="background:green; width:100%;">
<table width="100%">
<tr>
<td style="
width:100%; margin:0; padding:0; border:0; outline:0;
height:100px;
background:#4b86fc;
background-size:60px 60px;
">
</td>
</tr>
</table>
<table width="500" align="center">
<tr>
<td style="
padding:20px 0px 25px 0px;
color:#000; font-family:Verdana, Geneva, sans-serif;
font-weight:100; font-size:12px;">
<p>Hi,</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Many Thanks,
Liam</p></td>
</tr>
</table>
<table width="100%">
<tr>
<td style="
width:100%; margin:0; padding:0; border:0; outline:0;
background-color:#ebebeb;
background:#ebebeb;
border-top:1px solid #c3c3c3;
font-family:Verdana, Geneva, sans-serif;
font-weight:100; font-size:11px;
text-align:center;">
<ul style="list-style-type:none; margin:0; padding:0;">
<li style="display:inline; padding:0 8px 0 0;">Homepage</li>
<li style="display:inline; padding:0 8px 0 0;">Twitter</li>
<li style="display:inline; padding:0 8px 0 0;">Dribbble</li>
<li style="display:inline; padding:0 0 0 8px;">Facebook</li>
</ul>
</td>
</tr>
</table>
</div>
</body>
This will get you started:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
content
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>
This has the background set as white (#FFFFFF) so that if someone forwards it, they will be writing on white. You can change this to whatever, just keep in mind nobody wants to type on a dark color. The inner table (on the same line as the <body> tag) controls color of the html area background color (#252525). The content table is your center floated panel.
See this thread for a lot more info on html email.
You can apply 100% width for table in html email
Also consider these things :
1 - Must include <meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> in <head>.
2 - Apply mso-line-height-rule: exactly; at the <body>.
Like, <body mso-line-height-rule:exactly;>
3 - Please avoid <ul> & <li> tags, you can use <p> or any other supporting tags. Use • for bullet.
4 - Use <table> instead of <div>
5 - Use <b> instead of <strong>.
6 - Use nested tables, rather than rowspan or colspan.
Go to https://www.campaignmonitor.com/css/ for all kind of help in css for mailer
By default, most browsers add margin to the BODY tag. Therefore you need
<body style="background:blue;margin:0">
to get rid of that margin.
Have you tried putting
margin:0;
in the body style tag?
Related
I'm hoping someone can help me with this. I have tried everything I know and read all the articles I could find. Nothing has worked
Basically, there is what seems to be a neon blue background color showing up ONLY on Gmail in the <td> containing the header image.
Screenshot (with image missing):
Screenshot (with image showing neon background):
Table code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="=FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
I have specified background colour white in the table and td. I have also added style attributes to the border to the href and img tags. None of these have worked.
The classes container and container1 both contain:
border-width:0 none;
background: #ffffff;
text-decoration: none;
text-decoration-color: #ffffff;
Even when I unlinked the header image and sent another test, the blue was there!
I think you added an equal rather than a hash in background color decoration for the td. You have bgcolor="=FFFFFF" instead of bgcolor="#FFFFFF". Below is the fixed code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="#FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
Cheers
I am creating a mail template with responsive.In OutLook when mail is loading first time, images are not displaying but mail looks good no scroll bar. On clicking the image, image get loaded and automatically scroll bar comes. Its not responsive. How to avoid this scroll bar?
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
margin:0 auto;
}
.max-width{
width:100%;
}
.no-margin{
margin:0;
}
.margin-equal{
margin:0 auto;
}
.bold{
font-weight:bold;
}
.content-main-p{
padding:0 0 10px 0;
margin:0;
}
.link{
outline:none;
border:0;
display:inline-block;
color:#0000EE;
}
.wrapper{
padding:0;
font-family:'Calibri';
color:#333;
overflow:hidden;
border-collapse:collapse;
border:0;
font-size:14px;
max-width:100%;
}
.content{
background-color:#ffffff;
}
.content-main{
padding:10px 0;
font-size:14px;
line-height:20px;
color:#00201d;
}
.expert-content table td a{
word-break:break-all;
}
.expert-content table td{
vertical-align:top;
border-collapse:collapse;
min-height:20px;
}
.expert-content .list-test li{
list-style:none;
display:table-cell;
padding:0 2% 0 0;
}
.expert-content .list-test li p{
margin:2px 0;
}
.expert-content .list-test li a{
word-break:break-all;
}
.expert-content a,.expert-content span,.expert-content font span{
display:block !important;
word-break:break-all !important;
}
.content-footer{
border-top:1px solid #BFBFBF;
padding:10px 0;
margin:0;
font-size:10px;
}
.address-panel{
color:#313131;
line-height:normal;
}
.ExternalClass h1{
font-weight:bolder !important;
}
.ExternalClass *{
line-height:100% !important;
}
.expert-content,.address-panel{
border-top:1px solid #BFBFBF;
padding:10px 0;
width:100%;
}
.logo-section a img{
max-width:100%;
}
#media only screen and (max-width: 480px){
body{
font-size:11px !important;
margin:0;
padding:0;
}
} #media only screen and (max-width: 480px){
.wrapper{
width:100% !important;
}
} #media only screen and (max-width: 767px){
.expert-content td{
width:100%;
display:block !important;
}
} #media only screen and (max-width: 480px){
.expert-content td{
width:100%;
display:block !important;
}
} #media only screen and (max-width: 480px){
.bg-btn{
font-size:12px;
margin-right:-130px;
}
}</style></head>
<body>
<table cellpadding="0" cellspacing="0" class="wrapper margin-equal" style="width: 100%;max-width: 100%;table-layout: fixed;">
<!--Email Content table-->
<tr>
<td class="max-width">
<div style="padding: 0 1%;">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="position: relative">
<table cellspacing="0" cellpadding="0" class="content margin-equal" style="width: 100%;max-width: 100%;table-layout: fixed;">
<!--Image section-->
<tr class="logo-section">
<td style="background-color:#D9D9D9;">
<table cellspacing="0" cellpadding="0" class="content margin-equal" style="width: 100%;max-width: 100%;table-layout: fixed;position: relative;">
<tbody>
<tr>
<td style="width: 100%;">
<img style="max-width: 100%; display: block;" src="https://gallery.mailchimp.com/15e0eb6ff3b427d17752e909f/images/04778e34-84a5-487d-be77-813f1a8a9550.png">
</td>
</tr>
<tr style="position: absolute;bottom: 0;">
<td>
<table cellspacing="0" cellpadding="0" class="content margin-equal" style="max-width: 100%;table-layout: fixed;">
<tr>
<td>
<div style="border-radius: 3px;background-color: #E18600;background: #E18600; width: 400px;position:relative; top:-100px !important;">
<a style="font-size: 16px;font-family: Helvetica, Arial, sans-serif;color: #ffffff;text-decoration: none;border-radius: 3px;padding: 15px 25px;border: 1px solid #E18600;display: inline-block;" href="http://www.drupalgeeks.com/still-on-drupal-6-and-looking-for-reliable-long-term-support?utm_source=Email%20Marketing&utm_medium=Email&utm_campaign=Amx-D6-Retainer-MS">
Click here
</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--End Image section-->
<!--Main content-->
<tr>
<td class="content-main" style="background-color:#D9D9D9;">
<p>Hi ,</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.software like Aldus PageMaker including versions of Lorem Ipsum..</p>
<p>xxxx is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker includingversions of Lorem Ipsum.</p>
<p>Thanks,<br>
XXXXXXX</p>
</td>
</tr>
<!--End 3 Column Layout -->
<tr>
<td>
<div style="padding: 10px 0; border-top:1px solid #BFBFBF;"></div>
</td>
</tr>
<tr class="logo-section">
<td style="text-align:center; background-color:#595959;line-height: 20px;padding: 20px 0 20px 0;color: #ffffff;">
<div style="padding: 8px 8px 2px 8px;">
<a href="">
<img src="https://marketing-image-production.s3.amazonaws.com/uploads/e512ea00cef06b6458a70eca017036ea64ac16d638a7f3b6f64ecc89516cb677a3c5c02d96aa046464ba1eeb74119b940aeef1ad6b4d7159156ec0f5bbc738e2.png">
</a>
<a href="">
<img src="https://marketing-image-production.s3.amazonaws.com/uploads/41518b8775122f06178d677e57942f8e8008b80d3891bd2ac70e26ef59ca04173bb473e3ac1866f89e0ea79a395495b29d6cebef12687cfbc302a6913b5a80ab.png">
</a>
<a href="">
<img src="https://marketing-image-production.s3.amazonaws.com/uploads/cb4ebae50ac0840135990248236b9828610f1828d7f4f49e2f9b4b5683940d3ab2d7a616b3f9228e91525162a4c234157d4100b3e83d00c1fbfdd047b44b7e07.png">
</a>
<a href="">
<img src="https://marketing-image-production.s3.amazonaws.com/uploads/037a112de555a804cbe0be286210f3cbc4a9eaa250556e8cd419acdf80395321955758fe23d0fe50b36bdeccf0918b55ef128d8fd59e8812e8dad71b167032ee.png"></a>
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align:center;background-color:#D9D9D9;padding: 10px 0;">
<a style="color:#000000;font-size: 18px;" href="">Visit us</a>|<a style="color:#000000;font-size: 18px;" href="">Unsubscribe</a>
</div>
</td>
</tr>
<!--End Signature panel-->
<!-- Disclaimer -->
<tr>
<td class="content-footer no-margin">
<p class="no-margin" style="padding:0;"><span class="bold">Note: </span>
This is a promotional email which complies with all the guidelines
of CAN-SPAM act 2003. We have found your email address through our own
efforts on the web search and not through any illegal way. If you find
this email unsolicited, please reply with "REMOVE" in the subject line and
we will take care that you don't receive any further promotional mail.
</p>
</td>
</tr>
<!--End Disclaimer -->
</table>
</div>
</td>
</tr>
</table>
</div>
<!--Footer mountain -->
</td>
</tr>
<!--End Email Content table-->
</table>
</body>
</html>
Hello I am making a button to work in outlook 2010 and the problem is that the button image wont centre vetically and the padding & margin wont display. Is there anyone who can help me solve this issue? Works fine on most email clients.
<table style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:center; padding:0; float:left; " align="center" >
<tbody >
<tr style="vertical-align:top; text-align:left; padding:0; " align="left" >
<td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; display:block; color:#fff; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:16px; text-align:left; background-color:#EB7201; width:auto !important; " valign="top" align="center" >
<div class="mktEditable" id="cta-btn">
<a href="#pramrylink" style="color: #fff; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-size: 14px;letter-spacing:1px;vertical-align: middle; display: inline-block; margin: 10px;padding: 10px;">
<span style="vertical-align:middle; margin-left:5px;">Primary Button</span>
<img src="http://eu-lon03.marketo.com/rs/brotheruk/images/arrow-orange.png" alt="facebook" border="0" width="30" height="20" style="vertical-align: middle;">
<br>
</a>
</div>
</td>
</tr>
</tbody>
</table>
Margin and padding should really be replaced with td's to keep the email format consistent across all clients. But for you code above removing the text-align: left; on the tr should fix it.
YOU SHOULD READ THIS ON ALLOWED USE OF CSS IN EMAILS https://www.campaignmonitor.com/css/
I've removed stuff and added it below for you to work from.
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" >
<tbody >
<tr style="vertical-align:top; text-align:left;" align="left" >
<td style="color:#fff; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:16px; " valign="middle" align="center" >
<div class="mktEditable" id="cta-btn">
<a href="#pramrylink" style="width: 180px;
color: #fff;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
letter-spacing:1px;
vertical-align: middle;
display: inline-block;
padding: 10px;
background-color:#EB7201; ">
<span style="vertical-align:middle;" align="left">Primary Button</span>
<img src="http://eu-lon03.marketo.com/rs/brotheruk/images/arrow-orange.png" alt="facebook" border="0" width="30" height="20" style="vertical-align: middle;">
<br>
</a>
</div>
</td>
</tr>
</tbody>
</table>
Floats are replaced with align: left/right;
Margins should be replaced with more complex combinations of tr's and td's, if something need to be centred like an image then align:center; on the wrapping td should do that.
Try reset everything on the link (0 line-height, 0 padding, 0 font-size) and apply the styles (fix line-height, fix padding, and fix font-size) inside the link into a span where you apply the resetted styles.
I suggest to try a lot different css implementations and resend your mails.
Tip: Campaignmonitor offers a good list according to CSS and Newsletters
https://www.campaignmonitor.com/css/
Whilst trying to create a responsive email which looks good on retina display devices, I have discovered that Outlook doesn't respect specified criteria for images and displays them as their source dimensions.
For a proof of concept (POC) I have created a banner image as 1200x400, so in emails it would be scaled to 600x200 and as 300x100 on mobile devices. Sounds good right?
Well, in Outlook it shows it as 1200px wide and there doesn't seem to be anything I can do about it. Here is the JSFiddle that results in the ghastly Outlook email:
http://jsfiddle.net/hirenshah/rdux8vkg/11/
HTML:
<body bgcolor="#C0C0C0">
<!--[if (mso)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; background-color: white; margin-left: auto; margin-right: auto;">
<tr>
<td>
<!-- Header Table Start -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="alignrightonmobile">
<img src="http://hirenshah.co.uk/poc/logo.png" width="100px" height="75px" />
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>Quote Reference ABC123456</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<img class ="banner" src="http://hirenshah.co.uk/poc/banner.png" style="width:auto; max-width:100%;height:auto"/>
</td>
</tr>
</table>
<!-- Header Table End -->
<!-- Body Table Start -->
<!-- Body Table End -->
</td>
</tr>
</table>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
CSS:
#media screen and (min-width: 601px) {
.container {
width:600px !important;
}
.headercolumnright {
text-align:right !important;
}
* {
font-family: Verdana;
color:blue !important;}
.alignrightonmobile {text-align:right !important;}
}
.headercolumnleft {
width: 300px;
display: block;
text-align:left;
float: left;
font-size:12pt;
}
.headercolumnright {
width: 300px;
display: block;
text-align:left;
float: right;
font-size:12pt;
}
div {
outline: 1px solid red;
}
* {
font-family: Verdana;
color:red;}
.alignrightonmobile {text-align:left;}
img.resize {
width:auto;
max-width:100%;
height:auto;
}
Outlook has some of the most limited CSS support out of all the popular clients: https://www.campaignmonitor.com/css/
With that in mind it's easier to build your email to work with Outlook and improve it for all other clients with CSS.
With regards to solving your specific problem, first of all the image you use in the img tag should be optimized for Outlook at 600px wide.
We can then use CSS to set a background-image on the td that contains your image so that you can load in the correct image for those devices that support it, you'll also want to use CSS to hide the image within your td tag on those devices using your media rules.
This is my page source:
<html style="height: 100%">
<head>
<link rel="stylesheet" media="screen" href="/public/stylesheets/main.css">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="height: 100%; margin: 0px">
<table>
<tr>
<th>
<img src="/public/images/logo.jpg" alt="logo" id="logo" />
</th>
</tr>
</table>
<iframe id="testFrame" src="/public/site_down.gif" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100" width="100">
</body>
</html>
The code below shows the logo in center of page in Firefox, but left aligned in IE. How do i make it browser independant so that it always shows in center?
<table>
<tr>
<th>
<img src="/public/images/logo.jpg" alt="logo" id="logo" />
</th>
</tr>
</table>
The iframe code is left aligned in Firefox and IE, with IE showing V scroll bar, Firefox does not. I want to make iframe flexible so that the client can drop any image/html code so that it will always be centered without any scroll bars showing up.
My css
table
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
margin:auto;
vertical-align:middle;
}
td
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
}
Centered pages generally work like this:
<body>
<div id="wrapper">
...your side contents...
</div>
</body>
CSS:
#wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
}
The same technique can be used to center anything, including your image and your Iframe. Give it a class or ID and apply the same CSS pattern.