I need to put a circle on a card for a mailing
but I can't put styles like these for mailing:
position: absolute;
left: 50%;
transform: translateX(-58%) translateY(-75%);
I opted to use margin-top but it doesn't work either!
Actually, I have:
My code is:
..code header
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; color: white;padding: 0px 8px 0px 8px; border-collapse:separate; background-color:#5619A4;">
<tr>
<td valign="top" style="font-size: 13px;">
<div align="center">
<table border="0" cellpadding="10" cellspacing="0" width="590" style="max-width: 50px; color: white;padding: 0px 8px 0px 8px; border-collapse:separate; background-color:transparent;margin-top:-12%;width: 25px;">
<tbody>
<tr>
<td >
<div style="max-width: 75%;background-color:white;border-radius: 16px;margin: 12%;background-color: transparent;">
<div align="center"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="margin-top:-10%;height:100px;v-text-anchor:middle;width:100px;" arcsize="600%" stroke="f" fillcolor="#ff8080">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#ff8080;border-radius:50%;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:100px;text-align:center;text-decoration:none;width:100px;-webkit-text-size-adjust:none;">1</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
As you noticed, support for absolute positioning is pretty bad across email clients. But it can be emulated using the max-height property and the faux absolute position technique.
Here’s a full example of what you're trying to achieve based on your code.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Overlap</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto; width:590px; background:#fff;">
<tr>
<td>
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:100%;"><tr><td style="font-size:0; height:50px;">
<v:oval xmlns:v="urn:schemas-microsoft-com:vml" style="position:absolute; top:0; left:245px; width:100px; height:100px; v-text-anchor:middle;" fillcolor="#ff8080" stroke="false">
<v:textbox style="color:#fff;">
1
</v:textbox>
</v:oval>
</td></tr></table>
<![endif]-->
<!--[if !mso]><!-->
<div style="max-height:50px; text-align:center;">
<div style="display:inline-block; width:100px; height:100px; border-radius:50px; background-color:#ff8080; text-align:center; font:bold 16px/100px sans-serif; color:#fff;">
1
</div>
</div>
<!--<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto; width:100%; background:#5619a4;">
<tr>
<td style="padding:16px; padding-top:66px;">
<p style="margin:0; color:#fff; font:16px/24px sans-serif;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore alias accusamus repudiandae soluta, provident nam aut iste! Facilis, blanditiis, voluptatum.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
How about using position: relative ?
The tag a would have these rules:
background-color: white;
border-radius:50%;
text-align:center;
text-decoration:none;
width:100px;
height: 100px;
display: block;
position: relative;
margin: 0 auto;
bottom: -75px;
left: 0;
right: 0;
padding: 0;
color: black;
line-height: 50px;
text-align: center;
You can adjust how much of the circle overlaps with bottom: -75px;
<table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; color: white;padding: 0px 8px 0px 8px; border-collapse:separate; background-color:#5619A4;">
<tbody><tr>
<td valign="top" style="font-size: 13px;">
<div align="center">
<table border="0" cellpadding="10" cellspacing="0" width="590" style=" color: white; border-collapse:separate; background-color:transparent;">
<tbody>
<tr>
<td>
<div style="">
<div align="center" style="width: 100%;text-align: center;"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="margin-top:-10%;height:100px;v-text-anchor:middle;width:100px;" arcsize="600%" stroke="f" fillcolor="#ff8080">
<w:anchorlock/>
<center>
<![endif]-->
1
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody></table>
Related
I am trying to make the following page responsive. But when I hit 550px width I got the following result. If I go further down the resolution all my stuff will be slanted to the left except for the footer. I am a beginner trying to learn responsive design. I really appreciate all the help I can get. If you can provide a bit of explanation it will be great. All help is deeply appreciated. Thank you in advance.
https://jsfiddle.net/hansheung/Lhyk3s86/1/
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
<title>Benefits</title>
<style type="text/css">
body {
width: 100%;
background-color: #ffffff;
margin: 0;
padding: 0;
font-family: 'Open Sans'
}
p,
h1,
h2,
h3,
h4 {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
html {
width: 100%;
}
table {
font-size: 14px;
border: 0;
}
/* ----------- responsivity ----------- */
#media only screen and (max-width: 640px) {
/*------ top header ------ */
.main-header {
font-size: 20px !important;
}
.main-section-header {
font-size: 28px !important;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.align-center {
text-align: center !important;
padding-top: 20px;
}
.align-left {
text-align: left !important;
padding-bottom: 20px;
}
.no-bg {
background: none !important;
}
/*----- main image -------*/
.main-image img {
width: 640px !important;
height: auto !important;
}
/*-------- container --------*/
.container600 {
width: 460px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 640px !important;
height: auto !important;
} */
}
#media only screen and (max-width: 600px) {
/*------ top header ------ */
.main-header {
font-size: 18px !important;
}
.main-section-header {
font-size: 26px !important;
}
/*-------- container --------*/
.container600 {
width: 400px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 600px !important;
height: auto !important;
} */
}
.responsive{
width: 100%;
height: auto;
}
#font-face {
font-family: Kollektif Regular;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif.woff);
}
#font-face {
font-family: Kollektif Bold;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Bold.woff);
}
#font-face {
font-family: Kollektif Italic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Italic.woff);
}
#font-face {
font-family: Kollektik BoldItalic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-BoldItalic.woff);
}
.text{
color: #2d2a26;
font-size: 16px;
line-height: 28px;
text-align: justify;
}
.singleLine{
line-height:16px;
}
.doubleLine{
line-height:40px;
}
.subtitle{
font-size: 20px;
color:#FF7F30;
}
.text-color{
color: #ffffff;
font-size: 14px;
line-height: 23px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- header -->
<table width="100%" bgcolor="ffffff">
<tr>
<td >
<table align="center" width="600" class="container600">
<tr>
<td height="10" > </td>
</tr>
<tr>
<td>
<table border="0" align="center" width="600" class="container600">
<tr>
<td class="section-img">
<a href="http://www.talent-trust.com" ><img src="http://www.talent-trust.com/documents/img/j19-ttc_header.png" width="640"/></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end header -->
<!-- big banner section -->
<table width="100%" >
<tr>
<td align="center" valign="top" style="background:#ffffff url(http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:150px;padding-bottom:150px">
<table align="center">
<tr>
<td valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--end banner-->
<table border="0" align="center" width="70%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td style="line-height: 50px;"> </td>
</tr>
<tr>
<td align="justified" style="color: #053D56; font-size: 40px; font-family: Kollektif; line-height: 28px;">
<p>Member Benefits</p>
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td class="text">
At TTc, we aim to give missionaries the security, physical health, mental health, and wellness support and resources that they need to excel in their calling and stay in the field longer.
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td align="center">
<table border="0" width="70%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<td height="2" style="font-size: 2px; line-height: 2px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 Column Blog Layout-->
<table width="100%">
<tr>
<td align="center">
<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td>
<table width="50%" align="left" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div>
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Keeping your costs down</p>
<br>
<p class="text">We know cost is a big deal, so we provide multiple ways to keep costs down:</p>
<br>
<p class="text">
No Claims Bonus – We reward our members for staying healthy, which helps us to keep our premiums down. See how you can save up to 50% of your premium. <a href="http://www.talent-trust.com/benefits/ncb.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
<table width="50%" align="right" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div >
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Tailored Services help you THRIVE Long-Term</p>
<br>
<p class="text">We look at what services and technology we can offer that will help our members to stay in the field longer.</p>
<br>
<p class="text">
vHealth – a 24/7 service that connects you to a European based family doctor from anywhere in the world for free. Using an app on your phone, you can video call or have a vHealth doctor visit whenever and wherever you need it. <a href="http://www.talent-trust.com/benefits/vhealth.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" style="font-size: 50px; line-height: 50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end section -->
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td height="50" style="font-size: 30px; line-height: 30px;"> </td>
</tr>
</table>
<!-- end section -->
<!-- contact section -->
<table width="100%" bgcolor="#053D66">
<tr>
<td height="40" style="font-size: 40px; line-height: 40px;"> </td>
</tr>
<tr>
<td >
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<!-- <td height="2" style="font-size: 2px; line-height: 2px;"> </td> -->
</tr>
</table>
</td>
</tr>
<tr>
<td >
<table align="center" width="700" class="container600">
<tr>
<td>
<table width="300" align="left" cellpadding="0" cellspacing="0" class="container600">
<tr>
<!-- logo -->
<td align="right" class="align-center">
<a href="http://www.talent-trust.com" ><img width="200" border="0" style="display: block; width: 200px;" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="" /></a>
</td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td style="text-align:right;" class="align-left"><img width="24" height="24" src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" ></td>
</tr>
</table>
<table width="2" align="left" cellpadding="20" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td class="hide" width="2" height="25"></td>
</tr>
</table>
<table width="250" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td align="left">
<div class="text-color">
Email us: abc#hotmail.com
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px; color: #ffffff;">Tel: +604-899-8945</td>
</tr>
<tr>
<td height="33" style="font-size: 33px; line-height: 33px;"></td>
</tr>
<tr>
<td>
<table align="left" cellpadding="0" cellspacing="0">
<tr>
<td class="text-left p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" ></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="60"> </td>
</tr>
</table>
<!-- end section -->
Im using VML in order to have background imgs in Outlook windows but when I use this code it causes my buttons to shift like 20px to the left in Outlook Windows.
Ive tried text-align and align centering everywhere with not much luck.
Removing the VML fixes issue but then removed bg img on Outlook.
Screenshot of issue:
Any input is appreciated.
Screencast of compared issue: https://screencast.com/t/7vAj6509FyH
<!DOCTYPE HTML>
<html lang="en">
<!-- Javelin v1.01 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>EVERY SEASON STARTS HERE</title>
<style type="text/css">
/* inject:css/mail.min.css */
a,body,span,table,td{-ms-text-size-adjust:100%}body,div[style*="margin: 16px 0;"]{margin:0!important}a,body,span,table,td{-webkit-text-size-adjust:100%}table,td{mso-table-lspace:0;mso-table-rspace:0}img{-ms-interpolation-mode:bicubic;border:0;display:block;outline:0;text-decoration:none}.a6S,.mobileOnly,img.g-img+div{display:none!important}a:link,span.MsoHyperlink{mso-style-priority:100!important;color:inherit!important;color:inherit}a:visited{color:inherit!important;color:inherit}table{border:0;border-collapse:collapse!important;border-color:inherit}body{font-size:16px;padding:0!important;width:100%!important}.aBn,.unstyle-auto-detected-links *,[x-apple-data-detectors]{border-bottom:0!important;cursor:default!important;color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important}a:link,span.MsoHyperlink{color:inherit;text-decoration:none}a span,span.yshortcuts{color:#FFF}span.yshortcuts:active,span.yshortcuts:focus,span.yshortcuts:hover{text-decoration:none;color:#FFF;background-color:none;border:none}#MessageViewBody a{color:inherit;text-decoration:none;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit}.a6S{opacity:.01!important}.h1,.h2,.h3,h1,h2,h3{font-family:DINPro-Medium,Arial,sans-serif!important;font-weight:700}.img,.img-headline{color:#FFF;font-family:sans-serif!important;text-align:center}.h1,h1{font-size:40px;line-height:44px}.h2,h2{font-size:30px;line-height:34px}h3{font-size:24px;line-height:28px}.h3,.img{font-size:18px}.h3{margin:0 0 8px}.img{background-color:#006554;line-height:22px}.img-headline{font-size:36px;font-weight:900;line-height:42px}p{/*!important;*/margin-bottom:1em}.contact{color:#FFF!important;text-decoration:none!important}.webkit{max-width:640px;margin:0 auto}#media all and (min-width:640px){.left{text-align:left;text-align:left!important}.right{text-align:right;text-align:right!important}}#media all and (max-width:639px){.mobile,.mobile_triggerproduct{display:inline-block!important}.border-container,.container,.mobile,.mobile_triggerproduct,.wrapper{padding:0!important;width:100%!important}.border-container,.container,.img,.img-headline,.mobile,.wrapper,table[class=button]{width:100%!important}.wrapper{margin:0!important}.border-container{max-width:95%}.mobile_triggerproduct{max-width:639px!important}.img,.img-headline{height:auto!important}[class=mobileOff]{width:0!important;display:none!important}[class*=mobileOn]{display:block!important;max-height:none!important}.center{text-align:center!important}.mobileOnly{display:block!important}.hideOnMobile{display:none!important}.left,.right{text-align:center;text-align:center!important}}#media all and (max-width:480px){.h1,h1{font-size:28px!important;line-height:32px!important}.h2,h2{font-size:24px!important;line-height:28px!important}.h3,h3{font-size:18px!important;line-height:22px!important}}
/* endinject */
/* inject:css/fonts.min.css */
#media screen{#font-face{font-family:DINPro-Light;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.svg#DINPro-Light) format('svg');font-weight:400;font-style:normal}#font-face{font-family:DINPro-Medium;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.svg#DINPro-Medium) format('svg');font-weight:400;font-style:normal}#font-face{font-family:DINPro-Black;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.svg#DINPro-Black) format('svg');font-weight:400;font-style:normal}}
/* endinject */
/* inject:css/brand.min.css */
.freeShip,body{font-weight:400}.flashPromo,.flashPromoSmall{mso-line-height-rule:exactly}.navbar a,a{text-decoration:none}a{color:inherit;display:block;max-width:100%;text-decoration:none text-align: center}body{font-family:Arial,sans-serif;margin:0!important;padding:0;background-color:#FFF;-ms-text-size-adjust:100%}.bonus-product-details{color:#F5F5F5;font-size:12px;line-height:18px;margin:0 10px}.disclaimerDark,.disclaimerLight{font-family:Arial,sans-serif;font-size:10px;font-size:10px!important;letter-spacing:.05rem;line-height:14px;mso-line-height-rule:exactly}.disclaimerDark{color:#FFF!important}.disclaimerLight{color:#212121!important}.freeShip{font-family:DINPro-Medium,Arial,sans-serif!important;font-size:14px}.headline,.logo{font-weight:900}.headline{font-family:DINPro-Black,Arial,sans-serif!important;font-size:36px;line-height:40px;margin:20px 0 0;padding:0 20px}.logo{background-color:#006554;color:#FAFAFA;font-family:sans-serif;font-size:24px;line-height:36px;text-align:center;max-width:175px;width:117px;height:auto}.navbar,.navbar .column-nav,.navbar a{text-align:center!important}.navbar{font-size:0}.navbar .column-nav{display:inline-block;max-width:320px;vertical-align:top;width:auto}.navbar a{display:inline-block;font-family:DINPro-Medium,Arial,sans-serif!important;font-size:14px;padding:16px 0;text-transform:uppercase}.footer,.preheader{font-family:Arial,sans-serif}.preheader{color:#707070;Margin-top:4px;Margin-bottom:0;Margin-left:10px;Margin-right:10px;font-size:11px}.one-column p{margin-bottom:14px!important;margin-top:14px!important}.flashPromoSmall{font-family:DINPro-Light,Arial,sans-serif!important;font-size:32px;font-weight:300;line-height:32px}.flashPromo{font-family:DINPro-Black,Arial,sans-serif!important;font-weight:900;line-height:40px}.pricing,.productInfo{font-family:Arial,sans-serif!important;margin:0}.pricing{font-weight:700;line-height:24px;font-size:14px}.productInfo{font-size:16px;font-weight:500}.productNameTab{font-size:18px;line-height:20px;margin:4px 20px;padding:0}.productPriceTab{font-size:16px;line-height:18px margin: 4px 0;padding:0}.productPromo{font-family:DINPro-Black,Arial,sans-serif;font-size:28px;font-weight:700;line-height:34px;margin:0 20px;padding:0}.subheadline{font-family:DINPro-Medium,Arial,sans-serif!important;font-size:30px;line-height:34px;font-weight:500;margin:0;padding:0 20px}.text{padding-top:16px}.valueCopy{font-family:DINPro-Medium,Arial,sans-serif!important;font-weight:400!important;margin:0}.welcome{color:#F6992F;font-family:DINPro-Medium,Arial,sans-serif;font-size:26px;margin:0;padding:0}.text{padding:16px 16px 0}.deviceWidth{width:33%;max-width:211px!important}.deviceWidth200{width:100%!important;max-width:180px}#media only screen and (max-width:480px){.bonus-product-details{font-size:12px!important;line-height:18px!important}.headline{font-size:40px!important;line-height:44px!important}.subheadline{font-size:24px!important;line-height:28px!important}.productNameTab,.productPriceTab{font-size:90%!important;line-height:95%!important;margin:8px 10px!important}.productPromo{font-size:24px!important;line-height:28px!important}.welcome{font-size:20px!important;line-height:21px!important}}#media only screen and (max-width:639px){.deviceWidth,.deviceWidth200{display:inline-block!important}table[class=button]{width:100%!important}.deviceWidth{width:49%!important;max-width:211px}.deviceWidth200{width:32%!important}}
/* endinject */
</style>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]-->
<!--[if (gte mso 9)|(IE)]><style type="text/css"> table {border-collapse: collapse;} </style> <![endif]-->
</head>
<body style="margin:0; padding:0; background-color:#FFFFFF;">
<!--[if gte mso 10]><style> /* Style Definitions for MSO 2010 */ table.MsoNormalTable, p, span, div, table, tr, td, th, a, h1, h2, h3 { mso-style-priority:99; font-family:"Arial","sans-serif"; } </style><![endif]-->
<center>
<div class="webkit"><!--[if (gte mso 9)|(IE)]><table width="640" align="center"><tr><td><![endif]-->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top" style="margin:0; padding:0;">
<!--# EMAIL BODY CREATIVE #############-->
<!--# Hero w/ Coupon (embedded background – image headline - left-aligned)-->
<table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%; background-position:right top !important; background-size:cover !important;" bgcolor="#006554">
<tr>
<td background="http://dsg.images.harmony.epsilon.com/_phoenix/_dev/codex/img/hero_baseball_bg.jpg" bgcolor="#006554" width="640" align="center" valign="top" style="background-position:right top !important; background-size:cover !important;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; width:640px; height:790px;" src="http://dsg.images.harmony.epsilon.com/_phoenix/_dev/codex/img/hero_baseball_bg.jpg"/>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; position: absolute; width:640px; height:790px;">
<v:fill opacity="0%" color="#F8F8F8"/>
<v:textbox inset="20px,0,0,0">
<![endif]-->
<div>
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" >
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 0 16px;">
<table width="600px" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="50%" class="mobile" align="center" valign="top" style="width:50%; padding-right:4px; padding-bottom: 16px !important;">
<!-- button-basic -->
<table class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#F5F5F5; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<tr>
<td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#212121;">
<a href="http://heroLink.com" target="_blank" style="color:#212121; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; color:#212121;">
SHOP NOW
</span></a>
</td>
</tr>
</table>
<!-- /button-basic -->
</td>
<td width="50%" class="mobile" align="center" valign="top" style="width:50%; padding-left:4px; padding-bottom: 16px !important;">
<!-- button-border -->
<table class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:inherit; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<tr>
<td width="100%" height="52" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#F5F5F5; border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; mso-padding-alt:0px 18px 0px 18px;">
<a href="http://heroLink.com" target="_blank" style="color:#F5F5F5; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; color:#F5F5F5;">
VIEW IN-STORE COUPON
</span></a>
</td>
</tr>
</table>
<!-- /button-border -->
</td>
</tr>
</table>
</td>
</tr>
<!--[if (gte mso 9)|(IE)]><tr><td height="15" style="font-size:15px; line-height:15px;"> </td></tr><![endif]-->
</table>
<!--spacer--><table><tr><td height="40" style="font-size:40px; line-height:40px;"> </td></tr></table><!--/spacer-->
<p class="disclaimerDark" style="font-family:Arial, sans-serif; Font-size:12px; font-size:12px !important; letter-spacing:normal; line-height:11px; text-align:center; margin:10px 0; padding:0 20px; color:#F5F5F5;">
<!--disclaimer copy-->
Replace this line of text with your disclaimer copy.
</p>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--/END Hero w/ Coupon (embedded background - image headline – left-aligned)-->
<!--/ EMAIL BODY CREATIVE /////////////-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></div>
</center>
</body>
</html>
This is one of my favourite email bugs/issues/caveats.
padding-left does not work in Outlook when inside a VML shape.
A lot of the styles could be removed from your button code. I'd also try adding a fixed width to the .button table. This combined with text-align center on the a parent td should keep the copy centered.
<table align="center" class="button" border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#ffffff; padding-top:16px; padding-bottom:16px;">
<a href="http://TabHeroLink.com" target="_blank" style="color:#ffffff; text-decoration:none;">
SHOP THIS DEAL
</a>
</td>
</tr>
</table>
One small thing to note too is your white button is using align="left", pulling it further over. Change that to center
<table align="center" class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#015F81; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; mso-padding-alt:0px 18px 0px 18px;">
You could change the above code to the below code:
<table align="center" class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#015F81; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden;margin:0 20px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; margin:0 18px">
I was able to fix this myself by implementing an outlook ghost table with the table at 640, the td at 600 and both having align="center"
Below is the code which i have written and please help me out in making that as responsive :
<!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" /><!--supports all Unicode characters in our document-->
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--Windows Phones will display our mobile version correctly-->
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- <link rel="stylesheet" type="text/css" href="styles.css" /> -->
<style>
/* Basics */
body {
margin: 0 !important; /* used for avoiding spaces and align from top */
padding: 0;
background-color: #3C3C3C;
}
table {
border-spacing: 0; /* to avoid spacing to borders */
font-family: sans-serif;
color: #333333;
}
td {
padding: 0;
}
img {
border: 0;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;/* to prevent the iPhone and iPad from inflating some fonts*/
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
margin: 0 auto;
background-color:#FFFFFF;
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
}
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}
.full-width-image h1{
margin: 0 auto;
font-size:22px;
border-bottom:3px solid #919191;
color:#3C3C3C;
padding-bottom:5px;
}
.inner {
padding: 10px;
}
p {
Margin: 0;
}
.h1 {
font-size: 21px;
font-weight: bold;
Margin-bottom: 18px;
}
.h2 {
font-size: 18px;
font-weight: bold;
Margin-bottom: 12px;
}
/* One column layout */
.one-column .contents {
text-align: left;
}
.one-column p {
padding:10px 0px 5px 5px;
color:#15717D;
font-size:20px;
font-family:sans-serif;
font-weight:bold;
}
.two-column{
background-color:#F36533;
padding:15px 0px 10px 35px;
}
.text1{
color:#FFFFFF;
font-size:22px;
font-family:sans-serif;
}
.text2{
color:#FFFFFF;
font-family:sans-serif;
font-size:12px;
}
.col-text{
padding-left:15px;
padding-top:10px;
font-size:16px;
font-family:sans-serif;
font-weight:bold;
color:#15717D;
}
.safety-text p{
font-size:21px;
font-weight:bold;
padding: 25px 0 25px 15px;
line-height:26px;
}
.safety-text span{
font-size:14px;
font-weight:lighter;
}
.safety-text a{
font-weight:bold;
color:#3C3C3C;
}
.brand-text{
padding:8px 0px 40px 15px;
font-size:30px;
color:#6FFEEC;
text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;
}
.box-content p{
padding:20px 135px 5px 10px;
background-color:#000000;
<!-- width:420px; -->
}
.register-button{
background-color:#000000;
padding: 15px 0px 20px 10px;
}
.register-button p {
color:#15717D;
border:1px solid #FFFFFF;
border-radius:30px;
background-color:#FFFFFF;
width:220px;
text-align:center;
padding: 15px;
}
.indication-text p{
font-size: 20px;
width: 560px;
color:#72635C;
}
.indication-text{
padding:0px 0px 0px 20px;
line-height:2em;
}
.speakers-text{
padding:0 0 0 20px;
}
.list-items{
font-size: 20px;
color:#72635C;
font-weight:bold;
list-style:none;
}
li::before {
content: "•";
color: #F16532
}
.speaker-details1{
vertical-align:top;
padding-left: 15px;
}
.speaker-details2{
vertical-align:top;
padding-left: 15px;
}
.speaker-details2 h2{
color:#72635C;
}
.speaker-details2 p{
color:#FFFFFF;
border:1px solid #FFFFFF;
border-radius:30px;
background-color:#15717D;
width:220px;
text-align:center;
padding: 15px;
}
.bottom-text{
padding:15px 0 40px 10px;
}
.bottom-text p{
font-size: 19px;
color:#72635C;
}
.bottom-text a {
color:#72635C;
}
</style>
</head>
<body>
<center class="wrapper">
<div class="webkit">
<table class="outer" align="center">
<tr>
<td>
<div class="column">
<table class="outer" align="center">
<tr>
<td class="full-width-image">
<h1>Main Heading Goes here for the following template</h1>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="one-column">
<div class="column">
<table width="100%">
<tr>
<td class="inner contents">
<p>From:<br>
TO:<br>
Date:<br>
Subject:<br>
[Pre header]
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="two-column">
<div class="column">
<table width="100%">
<tr>
<td class="two-column-img">
<img src="images/gsk-logo.png" alt="gsk" style="width:80px;height:55px;"/>
</td>
<td class="text1">
For HealthCare Professionals
</td>
</tr>
<tr>
<td colspan="2" class="text2">
<p style="font-size:12px;font-family:sans-serif;"><u>[Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.]</u></p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="information-column">
<div class="column">
<table width="100%">
<tr>
<td class="col-text">
<u>Prescribing Information</u></p>
</td>
<td class="col-text">
<u>[Patient Information Leaflet]</u>
</td>
</tr>
<tr>
<td colspan="2" class="safety-text">
<p>
Important Safety Information<br>
<span>Lorem ipsum dolor sit amet, consectetur,sed to euismod temper incididunt<br>ut labore et dolore magna aquila.<a>Continued Below</a></span>
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="one-column">
<div class="column">
<table width="100%">
<tr>
<td class="brand-text">
[BRAND LOGO,GENERIC,STRENGTHS]
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="one-column">
<div class="column">
<table width="90%" style="margin-left:10px;">
<tr>
<td class="box-content">
<p style="color:#FFFFFF;">You're invited to:</p>
<p style="color:#FFFFFF;">[Title,Speaker First name Last name] <br>[Work Area]</p>
<p style="color:#FFFFFF;">[Date] | [Time] | Website</p>
</td>
</tr>
<tr>
<td class="register-button">
<p>Register for Website</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="indication">
<div class="column">
<table width="100%">
<tr>
<td class="indication-text">
<h2>Indication</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="indication">
<div class="column">
<table width="100%">
<tr>
<td class="indication-text">
<h2>[Greeting Salutation]</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="indication">
<div class="column">
<table width="100%">
<tr>
<td class="indication-text">
<h2>[List of Website Listings]</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="list-items">
<li>
Unordered list item
</li>
<li>
Unordered list item
</li>
</ul>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="speakers-text">
<h2>Speakers</h2>
</td>
</tr>
<tr>
<td class="speakers-list">
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="images/img1.png" width="270" height="185" alt="" />
</td>
<td class="speaker-details1" align="top">
<h3>[Follow MI template for speaker bio]</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="speakers-list">
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="images/img2.png" width="270" height="185" alt="" />
</td>
<td class="speaker-details2">
<h3>[Follow MI template for speaker bio]</h3>
</td>
</tr>
<tr>
<td colspan="2" class="full-text">
<h2>[Full Important Safety Information]</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="speakers-list">
<div class="column">
<table width="100%">
<tr>
<td class="inner" style="border-top:5px solid #F36533;">
<table class="contents">
<tr>
<td>
<img src="images/img3.png" width="270" height="185" alt="" />
</td>
<td class="speaker-details2">
<h2>[Join and Speaker name text.]</h2>
<p>Register for Website</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="bottom-text">
<p>Please see full <u>Prescribing information</u>,including <u>[Patient Information Leaflet]</u>, for [PRODUCT(Generic)]</p><br>
<p>This email is intented for US healthcare professionals only.</p><br>
<p>To report SUSPECTED ADVERSE REACTIONS, contact MadhuriChiluka at 1-835-965-1254 of FAD at 1-756-FAD-8475 or <a>www.fad.div/telecomh</a>.</p><br>
<p>[PRODUCT] is a registered trademark of ABC.</p><br>
<p><u>[ABC LOGO]</u> © [YYYY] ABC group of companies.All rights reserved.Produced in INDIA.[Activity ID][Month YYYY]</p><br>
<p>Do not reply to this e-mail.Replies sent to this e-mail address are not received.</p><br>
<p>[MadhuriChiluka Response Center, P.O.Box 201, 1 Mreoo Dr.,Researchpark Park, NC 58794]</p><br>
<p>[If you are not interested in receiving further e-mail communications like this one,or if you received this message in error,please visit <a>www.contactus.abc.com/genius.html</a>]</p><br>
<p>[Third Party mailing address and 125-YGOO statment]</p><br>
<p><u>[Privacy Statement]</u></p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I think you must learn the CSS responsive stuff.
And then try it out, if you stuck on something then come back.
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
Br Christoph
I have spent hours trying to create an email template that acutally works. I am trying to position DIVs next to each other in the BODY of an confirmation email, that is to be sent from my website. So in the resulting email I have this :
<div class="view-content" style="margin-bottom: 20px;">
<h3 style="margin: 0px;font-size: 14px;background-color: #eff1f7;border-top: 1px solid #dedede;border-left: 1px solid #dedede;border-right: 1px solid #dedede;padding: 15px 15px 0 15px;">TESTO 925 - temperaturmätare, typ K, radio, larm,</h3>
<div class="views-responsive-grid views-responsive-grid-horizontal views-columns-3 checkout">
<div class="views-row views-row-1 views-row-first" style="background-color: #eff1f7;border-bottom: 1px solid #dedede;border-left: 1px solid #dedede;border-right: 1px solid #dedede;margin: 0px;">
<div class="views-column views-column-1 views-column-first" style="color: #000;">
<div class="views-field views-field-line-item-label" style="float: left;"> <span class="views-label views-label-line-item-label" style="font-weight: bold;font-size: 13px;">Artikelnr: </span> <div class="field-content artikelnr">0560 9250</div> </div>
<div class="views-field views-field-commerce-unit-price" style="float: left;"> <span class="views-label views-label-commerce-unit-price" style="font-weight: bold;font-size: 13px;">Pris: </span> <div class="field-content price">995 kr</div> </div>
<div class="views-field views-field-quantity" style="float: left;"> <span class="views-label views-label-quantity" style="font-weight: bold;font-size: 13px;">Antal: </span> <div class="field-content antal">1</div> </div>
<div class="views-field views-field-commerce-total" style="float: left;"> <span class="views-label views-label-commerce-total" style="font-weight: bold;font-size: 13px;">Summa: </span> <div class="field-content price">995 kr</div> </div> </div>
</div>
</div>
</div>
As you can see I try to use float:left here, but I have also tried using display:table in the container (.view-content), and display:table-row and display:table-cell respectively in the other DIVs. Other things I tried is using display:block and display:inline-block... with no luck. So what am I doing wrong here? Why do the DIVS with the class views-field above refuse to position themselves next to each other? There are reasons why I cannot use a simple table, a bit to lengthy to explain here.
UPD: OK, so I finally have to give this up and use a simple table approach because of lacking support for positioning of DIV's in popular email clients like Outlook 2013...
No option should be considered except for table tag when creating Mailers.Even SendGrid prefers to send mail which are coded using table tag.
I prefer to two create two DIVs with different or same width,resulting in a total of 600px. Then, apply maxwidth to keep both DIVs stackable on mobile devices.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<table style="max-width:600px;font-family:Arial,Helvetica,sans-serif" align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top">
<table style="text-align:left" align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width:100%;border:1px solid #dddddd" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding:5px 10px 5px 10px;border-bottom:3px solid #2e3192" valign="top">
<table style="max-width:600px" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="http://images.sixrevisions.com/2009/02/03-09_3d_logo_tutorial.jpg" style="display:block;max-width:80%;margin-right:15px" align="left" border="0" class="CToWUd" width="150px" height="80px">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-family:Arial;font-size:15px;padding-top:9px;padding-bottom:9px" width="100%">
<span style="color:#000000;font-weight:bold;font-size:15px;padding-left:9px;font-family:arial">Dear</span>
<span style="font-size:14px;font-weight:bold">Amandeep,</span>
<br>
</td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="background:#f1f1f1;padding:7px">
<table style="font-family:Arial;font-size:14px" border="0" bgcolor="#ffffff" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background:#ffffff;padding:10px">
<table style="font-family:Arial;font-size:14px" border="0" bgcolor="#ffffff" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h1 style="color:#4e4e4e;font-size:18px;font-weight:bold;display:inline;padding-right:10px">Teddybear Soft Toy </h1>
</td>
</tr>
<tr>
<td colspan="" rowspan="" headers="" style="border-bottom:1px solid #c4c4c4;padding-top:10px"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<div style="display:inline-block;max-width:350px;width:100%;vertical-align:middle">
<table style="padding:5px;font-family:Arial;font-size:13px" border="0" bgcolor="#ffffff" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2">We Want To Buy Teddybear Soft Toy. Kindly share the quotation for the same.</td>
</tr>
</tbody>
</table>
</div>
<div style="display:inline-block;max-width:220px;width:100%;text-align:center;vertical-align:middle">
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><a style="padding:10px 20px;text-align:center;text-decoration:none;font-weight:bold;border:1px solid #5e9122;background:#5e9122;background:-webkit-gradient(linear,left top,left bottom,from(#5e9122),to(#5e9122));background:-moz-linear-gradient(top,#5e9122,#5e9122);color:#ffffff;border-radius:4px;font-size:17px;width:200px;display:table-cell;margin-left:auto;margin-right:auto" rel="external" href="#">Contact Buyer
</a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can test your Mailer from this site PUTSMAIL
Works like a charm on all Mail clients.
I'll go ahead and post my example as well. Sudhir Kaushik's example looks good.
<head>
<style>
#outlook a{padding:0}body{width:100%!important;background-color:#333;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;margin:0!important;padding:0!important}.ReadMsgBody{width:100%}.ExternalClass{width:100%}ol li{margin-bottom:15px}img{height:auto;line-height:100%;outline:none;text-decoration:none}#backgroundTable{height:100%!important;margin:0;padding:0;width:100%!important}p{margin:1em 0}h1,h2,h3,h4,h5,h6{color:#222!important;font-family:Arial,Helvetica,sans-serif;line-height:100%!important}table td{border-collapse:collapse}.yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span{color:#000;text-decoration:none!important;border-bottom:none!important;background:none!important}.im{color:#000}div[id='tablewrap']{width:100%;max-width:600px!important}table[class='fulltable'],td[class='fulltd']{max-width:100%!important;width:100%!important;height:auto!important}#media screen and (max-device-width: 430px),screen and (max-width: 430px){td[class=emailcolsplit]{width:100%!important;float:left!important;padding-left:0!important;max-width:430px!important}td[class=emailcolsplit] img{margin-bottom:20px!important}}
</style>
</head>
<body style='width:100% !important; margin:0 !important; padding:0 !important; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; background-color:#FFFFFF;'>
<table border='0' cellpadding='0' align='center' cellspacing='0' id='backgroundTable' style='height:auto !important; margin:0; padding:0; width:100% !important; background-color:#333; color:#222222;'>
<tr>
<td>
<div id='tablewrap' align='center' style='width:100% !important; max-width:600px !important; text-align:center !important; margin-top:0 !important; margin-right: auto !important; margin-bottom:0 !important; margin-left: auto !important;'>
<table align='center' border='0' cellpadding='0' cellspacing='0' id='contenttable' style='background-color:#FFFFFF; text-align:center !important; margin-top:0 !important; margin-right: auto !important; margin-bottom:0 !important; margin-left: auto !important; border:none; width: 100% !important; max-width:600px !important;'
width='600'>
<tr>
<td width='100%'>
<table bgcolor='#FFFFFF' border='0' cellspacing='0' style='padding-right:25px' width='100%'>
<tr>
<td bgcolor='#FFFFFF' style='text-align:right;' width='100%'>
<a href='#'><img alt='Main banner image and link' border='0' src='http://placehold.it/72x100' style='display:inline-block; max-width:72px !important; width:100% !important; height:auto !important;'></a>
</td>
</tr>
</table>
<table bgcolor='#FFFFFF' border='0' cellpadding='25' cellspacing='0' width='100%'>
<tr>
<td bgcolor='#FFFFFF' style='text-align:left;' width='100%'>
<p style='color:#222222; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:19px; margin-top:0; margin-bottom:20px; padding:0; font-weight:normal;'>
Dear Customer,
</p>
<p style='color:#222222; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:19px; margin-top:0; margin-bottom:20px;margin-left:20px; padding:0; font-weight:normal;'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<table border='0' cellpadding='0' cellspacing='0' class='emailwrapto100pc' width='100%'>
<tr>
<td align='right' class='emailcolsplit' valign='top' width='100%'>
<p style='color:#222222; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:19px; margin-top:0; margin-bottom:20px; margin-left:20px; padding:0; font-weight:normal; text-align:left;'>
Please call us at 555-555-5555 with any questions.
</p>
</td>
</tr>
<tr>
<td align='left' class='emailcolsplit' valign='top' width='58%'>
<address style='font-size:15px; margin: 0; line-height: 1.25em; font-family: Helvetica, Arial'>
<p>
<span style='font-weight:600; font-size: 18px'>Your Company Inc</span><br>
400 Tech Drive<br>
Some City, State 22222<br>
<abbr title='Phone'><strong>P:</strong></abbr>555.555.5555<br>
<strong>Email:</strong><a href='mailto:hr#yourcompany.com'>hr#yourcompany.com</a>
</p>
</address>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
So beautiful right? This formatting drives me crazy. My email was a response to customers, but I'm sure it can be easily applied to other scenarios. Good Luck!
I have used Sendgrid to make the following template:
To send this using my Node server I have created the following module:
/**
* Created by root on 6/6/16.
*/
var path = require('path'),
emailTemplates = require('email-templates'),
async = require("async"),
mailConfig = require('../config/email.json'),
templates = require('../config/emailTemplates.json'),
_ = require('lodash'),
sendgrid = require('sendgrid')(mailConfig.sendGridApiKey);
var mymailer = {};
/**
* Sends an email to either one or multiple users
* #param template_id (The id key of the template. Can be found in emailTemplates.json
* #param to String or Array
* #param from String
* #param subject String
* #param keyReplacer Array of objects for keys to replace in the template
*/
mymailer.sendTemplate = function (template_id, to, from, subject, keyReplacer, text) {
var email = new sendgrid.Email();
var templateKey = templates[template_id];
if (templateKey) {
email.setSmtpapiTos(to);
email.subject = subject;
email.from = from;
email.text = text;
email.html = '';
email.setFilters({
'templates': {
'settings': {
'enable': 1,
'template_id': templateKey
}
}
});
email.smtpapi.header.sub = createSub(keyReplacer);
sendgrid.send(email);
}
else {
console.log('incorrect key');
}
};
function createSub(keyReplacer) {
var finalObject = {};
if (keyReplacer) {
_.forEach(keyReplacer, function (value, key) {
var k = ':' + key;
finalObject[k] = [value];
})
}
return finalObject;
}
module.exports = mymailer;
However when I receive my email it is stripped from both CSS and images.
It looks like this:
I guess it's some settings I'm missing but I don't know which. Which ones can I try?
Template html
<!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" data-dnd="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]><style type="text/css">
table {border-collapse: collapse;}
table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
img {-ms-interpolation-mode: bicubic;}
</style>
<![endif]-->
<style type="text/css">
body {
color: #000000;
}
body a {
color: #0071cb;
text-decoration: none;
}
p { margin: 0; padding: 0; }
table[class="wrapper"] {
width:100% !important;
table-layout: fixed;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img[class="max-width"] {
max-width: 100% !important;
}
#media screen and (max-width:480px) {
.preheader .rightColumnContent,
.footer .rightColumnContent {
text-align: left !important;
}
.preheader .rightColumnContent div,
.preheader .rightColumnContent span,
.footer .rightColumnContent div,
.footer .rightColumnContent span {
text-align: left !important;
}
.preheader .rightColumnContent,
.preheader .leftColumnContent {
font-size: 80% !important;
padding: 5px 0;
}
table[class="wrapper-mobile"] {
width: 100% !important;
table-layout: fixed;
}
img[class="max-width"] {
height: auto !important;
}
a[class="bulletproof-button"] {
display: block !important;
width: auto !important;
font-size: 80%;
padding-left: 0 !important;
padding-right: 0 !important;
}
// 2 columns
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
</style>
<style>
body, p, div { font-family: arial,sans-serif; }
</style>
<style>
body, p, div { font-size: 14px; }
</style>
</head>
<body yahoofix="true" style="min-width: 100%; margin: 0; padding: 0; font-size: 14px; font-family: arial,sans-serif; color: #000000; background-color: #0071CB; color: #000000;" data-attributes='%7B%22dropped%22%3Atrue%2C%22bodybackground%22%3A%22%230071CB%22%2C%22bodyfontname%22%3A%22arial%2Csans-serif%22%2C%22bodytextcolor%22%3A%22%23000000%22%2C%22bodylinkcolor%22%3A%22%230071cb%22%2C%22bodyfontsize%22%3A14%7D'>
<center class="wrapper">
<div class="webkit">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#0071CB">
<tr><td valign="top" bgcolor="#0071CB" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" role="content-container" class="outer" data-attributes='%7B%22dropped%22%3Atrue%2C%22containerpadding%22%3A%220%2C0%2C0%2C0%22%2C%22containerwidth%22%3A600%2C%22containerbackground%22%3A%22%23FFFFFF%22%7D' align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;" align="center">
<tr><td role="modules-container" style="padding: 0px 0px 0px 0px; color: #000000; text-align: left;" bgcolor="#FFFFFF" width="100%" align="left">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0;" class="module preheader preheader-hide" role="module" data-type="preheader">
<tr><td role="module-content"><p></p></td></tr>
</table>
<table class="module" role="module" data-type="wysiwyg" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr><td role="module-content" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div><%body%></div></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module wrapper" role="module" data-type="imagetext" data-attributes='%7B%22dropped%22%3Atrue%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22textbackground%22%3A%22%23ffffff%22%2C%22textmargin%22%3A%220%2C0%2C0%2C0%22%2C%22imagealignment%22%3A%22left%22%7D'>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr role="module-content">
<td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="leftColumnContent" role="column-one" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table role="module" data-type="image" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" class="wrapper" data-attributes='%7B%22child%22%3Atrue%2C%22link%22%3A%22%22%2C%22width%22%3A%22250%22%2C%22height%22%3A%22333%22%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22url%22%3A%22https%3A//marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg%22%2C%22alt_text%22%3A%22%22%2C%22dropped%22%3Atrue%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22alignment%22%3A%22%22%2C%22responsive%22%3Afalse%7D'>
<tr>
<td style="font-size:6px;line-height:10px;background-color:#ffffff;padding: 0px 0px 0px 0px;" valign="top" align="" role="module-content">
<img class="max-width" width="250" height="333" src="https://marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg" alt="" border="0" style="display: block; color: #000; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; " />
</td>
</tr>
</table></td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="rightColumnContent" role="column-two" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
<td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div>Hello world</div> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A2%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22cellpadding%22%3A0%2C%22containerbackground%22%3A%22%22%7D'>
<tr><td style="padding: 0px 0px 0px 0px;" bgcolor="">
<table class="columns--container-table" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr role="module-content">
<td style="padding: 0px 0px 0px 0px" role="column-0" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area empty">
</td><td style="padding: 0px 0px 0px 0px" role="column-1" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area ">
<table class="module" role="module" data-type="button" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22borderradius%22%3A6%2C%22buttonpadding%22%3A%2212%2C18%2C12%2C18%22%2C%22text%22%3A%22Your%20Bulletproof%20Button%22%2C%22alignment%22%3A%22center%22%2C%22fontsize%22%3A16%2C%22url%22%3A%22%22%2C%22height%22%3A%22%22%2C%22width%22%3A%22%22%2C%22containerbackground%22%3A%22%23ffffff%22%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22buttoncolor%22%3A%22%231188e6%22%2C%22textcolor%22%3A%22%23ffffff%22%2C%22bordercolor%22%3A%22%231288e5%22%7D'>
<tr>
<td style="padding: 0px 0px 0px 0px;" align="center" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile">
<tr>
<td align="center" style="-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-size: 16px;" bgcolor="#1188e6">
Your Bulletproof Button
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module footer" role="module" data-type="footer" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A1%2C%22padding%22%3A%2210%2C5%2C10%2C5%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr><td style="padding: 10px 5px 10px 5px;" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr role="module-content">
<td align="center" valign="top" width="100%" height="100%" class="templateColumnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="leftColumnContent" role="column-one" height="100%" style="height:100%;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Afalse%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
<td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
This email was sent by: [Sender_Name] [Sender_Address], [Sender_City] [Sender_State] [Sender_Zip]
</div>
<div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
To unsubscribe click: here
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>
</tr></td>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</td>
</table>
<![endif]-->
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</tr></td>
</table>
</div>
</center>
</body>
</html>
The problem with your code is, email clients does not support embedded css. Therefore all styles that you need must be inline with the tag. Also ugly as it might be, but the best way to layout an email template is by using tables.
However, here are some things that might help you with this problem.
TIPS
This will not work:
<style media="screen">
h1{
color: red;
}
</style>
<h1>I like turtles</h1>
This will work:
<h1 style="color:red;">I like turtles</h1>
HELPFUL SOURCES
You can read this to know more about creating email templates.
Source 1
Source 2
Also, there are some inliner out there that will convert your embedded css to inline css. Personally I am using Zurb's email inliner to solve this problem.
That's all I can say, I hope this will get you somewhere. Good luck :)
I had this problem, I fixed it by changing
Content content = new Content("text/plain", notification.getContent());
To
Content content = new Content("text/html", notification.getContent());