Buttons text shift to left in Outlook when using VML - css
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"
Related
Problem css; round circle over component - Email template
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>
Outlook 2016 - first line with default line-height, mso-line-height-rule doesn't work
I am trying to develop an HTML e-mail for Outlook 2016 and I have problem with line-height. There are many threads regarding this problem but nothing helped to me. I have few "lines" (td cells) with 1px in my table displayed w/o problems, the problem is first line of the message.
I tried to add inline style mso-line-height-rule: exactly in combination with line-height: 1px or 0px or 0 or 1. In combination with font-size: 0px or 1px or 0 or 1.
Nothing worked. So I placed some another element before the problematic one and the problem just moved to "new" element, disappeared from original one.
The version of Outlook 2016 is 1808 (build 10730.20344), I have feeling that before some time it worked normally, without tricks.
<style>
td {
padding: 0px;
margin: 0px;
border: 0px;
}
table {
border-collapse: collapse;
border-spacing: 0px;
font-family: "Arial", Arial, Helvetica, sans-serif;
font-size: 14px;
}
td#line {
background-color: #f0f0f0;
}
</style>
<body style="margin: 0px;">
<table cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<tr height="1" style="mso-line-height-rule: exactly; line-height: 1px; font-size: 0px;">
<td height="1" id="line" colspan="5" style="mso-line-height-rule: exactly; line-height: 1px; font-size: 0px; "></td>
</tr>
<tr>
...
Thanks!
Finally I found some workaround solution... below you can find simplyfied example.
Option 1 (hidden <div> with some text, w/o mso-hide: all style):
<!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" lang="cs" xml:lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
table {
border-collapse: collapse;
border-spacing: 0px;
}
</style>
</head>
<body>
<div style="overflow:hidden; color:transparent; visibility:hidden; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr height="1">
<td colspan="3" style="background-color: red;"></td>
</tr>
<tr>
<td width="1" style="background-color: blue;"></td>
<td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
<td width="1" style="background-color: blue;"></td>
</tr>
<tr height="1">
<td colspan="3" style="background-color: red;"></td>
</tr>
</tbody>
</table>
</body>
</html>
It works relatively good, but if you click somewhere/select something in the message, your first visible item (e.g. <td>) will disappear.
Option 2 (hidden <div> with some text, w/ mso-hide: all style, conditionally shown additional row with zero height and with transparent backround):
<!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" lang="cs" xml:lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
table {
border-collapse: collapse;
border-spacing: 0px;
}
</style>
</head>
<body>
<div style="overflow:hidden; color:transparent; visibility:hidden; mso-hide:all; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<!--[if gte mso 9]>
<tr height="0">
<td colspan="3" style="background-color: transparent;"></td>
</tr>
<![endif]-->
<tr height="1">
<td colspan="3" style="background-color: red;"></td>
</tr>
<tr>
<td width="1" style="background-color: blue;"></td>
<td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
<td width="1" style="background-color: blue;"></td>
</tr>
<tr height="1">
<td colspan="3" style="background-color: red;"></td>
</tr>
</tbody>
</table>
</body>
</html>
Then it's relatively unbreakable.
Only bad thing is that Outlook shows warning about possibility of wrong rendering. Most probably caused by <div> tag usage.
EDIT: warning is caused by height: 0 and width: 0 in <div> style. I think it's possible to remove these properties.
Enjoy!
Sendgrid template CSS is ignored
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());
How to replace styled <p> tag in HTML Table for Use in Outlook
How can I achieve the same styling effect you see being used below on the paragraph element for use in Outlook? As you probably know Outlook does not support padding and generally handles the paragraph tag very poorly. Anyway, in Outlook the paragraph element stretches horizontally to both edges of the table. I have successfully used margin-left & margin-right BUT only if I remove the padding!
I believe I need to get rid of the paragraph element all together and just use the table cell as a text container or even create another table within the cell tag but I'm having troubles styling either of those possibilities. I'm going in a bit of a circle here and need the correct solution that will be compatible with all email clients.
<body style="background:#F6F6F6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
<div style="background:#F6F6F6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tr>
<td align="center" valign="top" style="padding:20px 0 4px 0">
<!-- [ header starts here] -->
<table bgcolor="FFFFFF" cellspacing="0" cellpadding="10" border="0" width="650" style="border:3px solid #E0E0E0;">
<tr>
<td valign="top" align="center">
<img src="{{var logo_url}}" alt="{{var logo_alt}}" width="351" height="51" /></td>
</tr>
<!-- [ middle starts here] -->
<tr>
<td valign="top">
<p style="border:2px solid #E0E0E0; font-size:12px; line-height:16px; background:#F9F9F9; padding: 16px 18px;"> Welcome, {{htmlescape var=$name}}<br /><br />Please look at {{var product_name}}<br /><br />Here is message: <br />{{var message}}<br /><br /></p>
</td>
</tr>
<tr>
<td bgcolor="#E0E4E6" align="center" style="background:#E0E4E6; text-align:center;"><center><p style="font-size:12px; margin:0; ">Thank you, {{var sender_name}}</p></center></td>
</tr>
<tr><td style="background:ffffff; height="50"; align="center";>
<img src="{{skin url="images/facebook.png" _area='frontend' _package="ljj" _theme="can"}}" height="30" width="34" />
<img src="{{skin url="images/houzz.png" _area='frontend' _package="ljlkj" _theme="can"}}" height="30" width="38" />
<img src="{{skin url="images/instragram.png" _area='frontend' _package="ljlkj" _theme="can"}}" height="30" width="38" />
<img src="{{skin url="images/pinterest.png" _area='frontend' _package="ljlkj" _theme="can"}}" height="30" width="34" /></td></tr>
</table>
</td>
</tr>
</table>
</div>
</body>
body { color:#61777f; font:11px/1.35em Verdana, Arial, Helvetica, sans-serif; }
p a {color: #278eb2;}
table {
border-collapse: collapse;
}
You have there two paragraphs, just remove them.
Replace
<td valign="top">
<p style="border:2px solid #E0E0E0; font-size:12px; line-height:16px; background:#F9F9F9; padding: 16px 18px;"> Welcome, ...</p>
</td>
for
<td valign="top" style="border: 2px solid #e0e0e0; font-size: 12px; line-height: 16px; background: #f9f9f9; padding: 16px 18px"> Welcome, ...</td>
And the same with the second one paragraph:
<td bgcolor="#E0E4E6" align="center" style="background:#E0E4E6; text-align:center; font-size:12px; margin:0;">Thank you, {{var sender_name}}</td>
<!-- <center> isn't necessary here, when you used text-align: center; -->
You don't need them in this case.
Fixed Div - content is scrolling behing
I have this table at the top of my page...
<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed; z-index:99999;">
<tr>
<td><img src="logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
</table>
it always stays at the top of the page however when scrolling down, all the content on the page goes behind the table and you can see it behind
does anyone know what i can do to stop this from happening?
EDIT:
This is my full code...
<style type="text/css">
body,html {
height:100%;
}
#top-bar {
width:100%;
padding:10px 10px 80px 10px;
margin:0 0 100px 0;
border-bottom:solid 1px #000000;
top:0;
left:0;
}
#left-bar {
width:170px;
display:inline;
float:left;
}
#right-bar {
width:80%;
display:inline;
float:right;
}
</style>
</head>
<body>
<div id="top-bar">
<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed">
<tr>
<td><img src="logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
</table>
</div>
<div id="left-bar"><iframe src="header.php" width="180px" height="100%" frameborder="0" scrolling="no"></iframe></div>
<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
</div>
</body>
You're most probably looking for this: <table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff"> <tr> <td><img src="logo.png" width="282" height="41" /></td> <td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td> </tr> </table> The background-color makes sure you can't see any content that is behind the table. JsFiddle: http://jsfiddle.net/CRHxk/