I'm creating a eDM newsletter as a template in Marketo and it views fine in nearly everything but gmail. Divs with images seem to be creating a bottom-margin or something and I can't figure out how to get rid of it. Please see mark up below and an image with red rectangles representing the problem margin areas.
Thanks!
<html>
<head>
<title>Responsive Template</title>
</head>
<body style="margin: 0px; padding: 0px;">
<table cellpadding="0" cellspacing="0" valign="top" width="100%" align="center" bgcolor="#EBEBEB" style="padding: 0px; margin: 0px;">
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" valign="bottom">
<tr>
<td width="20"> </td>
<td><div class="mktEditable" id="headerImage" style="margin: 0px; padding: 0px;"><img src="https://placeholdit.imgix.net/~text?txtsize=25&txt=610%C3%97100&w=610&h=100" alt=""/></div></td>
<td width="20"> </td>
</tr>
</table>
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="650"><div class="mktEditable" id="topBanner" style="margin: 0px; padding: 0px;"><img src="http://www.vision6.com.au/download/files/20677/2408194/Header.png" alt=""/></div></td>
</tr>
</table>
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="20"> </td>
<td width="610" bgcolor="#FFFFFF"><div class="mktEditable" id="mainContent" style="padding: 20px; margin: 0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis pharetra mi ut finibus. Sed elementum eros ut augue egestas eleifend. Quisque nibh neque.</div></td>
<td width="20"> </td>
</tr>
</table>
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="20"> </td>
<td width="610" bgcolor="#FFFFFF">
<div class="mktEditable" id="footerImage" style="margin: 0px; padding: 0px;">
<img style="margin: 0px; padding: 0px;" src="https://placeholdit.imgix.net/~text?txtsize=25&txt=610%C3%97100&w=610&h=100" alt=""/>
</div></td>
<td width="20"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<style>
#media only screen and (max-width: 650px) {
body {
width: 100% !important;
min-width: 100% !important;
}
img {
float: none !important;
height: auto;
max-width: 100%;
margin: 0px !important;
padding: 0px !important;
}
</style>
</html>
IMG(gmail): http://s4.postimg.org/p2cwbvdn1/gmailmarginissue.jpg
edit*
IMG(No margin issue/Outlook): http://s16.postimg.org/yikdy0md1/Screen_Shot_2015_09_07_at_2_39_30_pm.png
Gmail domain will not always support div tags, hence remove div tags and apply css to td and also make sure to give alignments to td's(ex: <td align="left" valign="top"></td>)
line-height was the issue. It was adding an extra 3px to the .
Related
I'm trying to create Html email, in other email clients my layout looks great and responsive but when I check in outlook I have just one column instead of two columns, I tried to do a conditional statement for Microsoft Outlook, but no result, I get only one column, here is my code HTML, what I'm doing wrong, please?
/* styling */
.two-col{
text-align: center;
padding: 10px 0;
width: 100%;
font-size: 0;
}
.col{
display: inline-block;
width: 100%;
max-width: 300px;
margin-bottom: 5px;
vertical-align: top;
}
.padding{
padding: 25px;
}
.content{
font-size: 15px;
text-align: left;
}
<tr>
<td>
<table role="presentation" width="100%">
<tr>
<td class="two-col">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td width="300">
<![endif]-->
<table role="presentation" class="col">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/handsPinch.png" alt="Hands Pinch">
</td>
</tr>
<tr>
<td>
<h2>
Customize this email template!
</h2>
<p style="line-height: 24px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum mattis nisi mauris pharetra ullamcorper.
</p>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/Button.png" alt="Try it now">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td width="300">
<![endif]-->
<table role="presentation" class="col">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/handsGive.png" alt="Hands Give">
</td>
</tr>
<tr >
<td>
<h2>Customize this email template!</h2>
<p style="line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum mattis nisi mauris pharetra ullamcorper.</p>
<img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/Button.png" alt="Try it now">
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
The columns are probably just-so-slightly larger than 300 each since you have not zeroed every <table> (e.g. <table role="presentation" class="col">)
Ensure every table has minimally the following: <table role="presentation" cellspacing="0" cellpadding="0" border="0">
I'm working on a responsive email template and can't get some divs to center on mobile as they should.
I have media queries included in the CSS to center the content on mobile, but they are being ignored on the second div. Not sure if I have the media query styles in the right places in the code. Media queries and div code included for reference.
/*Responsive screens*/
#media screen and (max-width: 500px) {
.stack-column, .stack-column-center { display: block !important;width: 100% !important;max-width: 100% !important;direction: ltr !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important } /*Forces table cells into full-width rows*/
.stack-column-center { text-align: center !important; padding-left:0px !important; padding-right:0px !important; } /* And center justify these ones. */
.center-on-narrow { text-align: center !important;display: block !important;margin-left: auto !important;margin-right: auto !important;float: none !important; } /*Generic utility class for centering. Useful for images, buttons, and nested tables*/
table.center-on-narrow { display: inline-block !important; }
.email-container p { font-size: 17px !important; } /*Adjusts typography on small screens to improve readability*/
.middle-article-mobile-pt { padding-top: 60px !important; }
.middle-article-mobile-pb { padding-bottom: 60px !important; }
}
<tr>
<td dir="ltr" height="100%" style="padding: 30px 50px; background-color: #ffffff;" valign="top" width="100%"><!--[if mso]>
<table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="500" style="width: 500;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px; padding:0; margin:0;" width="100%">
<tbody>
<tr style="padding:0;margin:0;">
<td align="center" style="font-size:0; padding: 0;" valign="top" class=""><!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width: 200px; vertical-align:top; width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td dir="ltr" style="padding: 0 10px 0 10px;" class=""><img alt="alt_text" border="0" class="center-on-narrow" height="" src="http://go.pardot.com/l/190862/2019-04-09/h9rldk/190862/77786/template_testing_200px_placeholder.png" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" width="200"></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="300" style="width: 300px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width:300px; vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="center-on-narrow" dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 0 0 20px; text-align: left;">
<p class="body-h1" style="margin:0;">Headline</p>
<p class="body-h2" style="margin:0;"><a href="##" style="text-decoration:underline;">Author, CPA<br>
Title title title title</a></p>
<p class="body-copy" style="margin: 15px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- Button : BEGIN -->
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" bgcolor="#05090c7" pardot-data="" style="border-radius: 2px; background: rgb(255,255,255);" class=""><a class="light-blue-button" href="##"><!--[if mso]> <![endif]-->Read the Article <!--[if mso]> <![endif]--></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END --></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
Was expecting the .center-on-narrow and .stack-column CSS styles to center the div content on narrow but it's being ignored on the second div.
Try using center tags. This will center the content enclosed by the tags. For an example visit Center Tags Example.
I figured this out! Added some more mobile styles and tweaked the code around the CTA button.
/*Responsive screens*/
#media screen and (max-width: 500px) {
.stack-column, .stack-column-center { display: block !important;width: 100% !important;max-width: 100% !important;direction: ltr !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important }
.stack-column-center { text-align: center !important; padding-left:0px !important; padding-right:0px !important; }
.center-on-narrow { text-align: center !important;display: block !important;margin-left: auto !important;margin-right: auto !important;float: none !important; }
table.center-on-narrow { display: inline-block !important; }
.email-container p { font-size: 17px !important; }
.middle-article-mobile-pt { padding-top: 60px !important; }
.middle-article-mobile-pb { padding-bottom: 60px !important; }
.text-right-mobile { padding: 0px !important; }
.body-copy, .body-copy-2, .body-h1, .body-h2, .light-blue-button, .orange-button, .mobile-center { text-align:center !important; }
}
<tr>
<td dir="ltr" height="100%" style="padding: 30px 50px; background-color: #ffffff;" valign="top" width="100%" ><!--[if mso]>
<table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="500" style="width: 500;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px; padding:0; margin:0;" width="100%">
<tbody>
<tr style="padding:0;margin:0;">
<td align="center" style="font-size:0; padding: 0 0 60px 0;border-bottom:1px solid #ebebeb;" valign="top" class=""><!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
<tr>
<td valign="top" width="200" style="width: 200px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width: 200px; vertical-align:top; width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td dir="ltr" style="padding: 0 10px 0 10px;" class=""><img alt="alt_text" border="0" class="center-on-narrow" height="" src="http://go.pardot.com/l/190862/2019-04-09/h9rldk/190862/77786/template_testing_200px_placeholder.png" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" width="200"></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="300" style="width: 300px;">
<![endif]-->
<div class="stack-column" style="display:inline-block; margin: 0; max-width:300px; vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="center-on-narrow text-right-mobile" dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 0 0 20px; text-align: left;">
<p class="body-h1" style="margin:0;">Headline</p>
<p class="body-h2" style="margin:0;"><a href="##" style="text-decoration:underline;">Author, CPA<br>
Title title title title</a></p>
<p class="body-copy" style="margin: 15px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- Button : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#05090c7" pardot-data="" style="border-radius: 2px; background: rgb(255,255,255);" class=""><a class="light-blue-button" href="##"><!--[if mso]> <![endif]-->Read the Article <!--[if mso]> <![endif]--></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END --></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
I want to put hr between two elements in my table. I am creating mailing templemate. How can I put it in one row? Here's code:
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
line-height: 100%;
}
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
border-collapse: collapse;
}
.tablereset {
margin: 0 auto;
width: 640px !important;
line-height: 100% !important
}
.button {
margin: 0 auto !important;
}
.devicewidthsocial {
margin: 0 auto;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%!important;
margin: 0;
padding: 0;
display: block;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
td.boxesfont {
font-size: 17px !important;
font-family: 'Roboto', Arial, Helvetica, sans-serif!important
}
td[class*=font-resize] {
font-size: 140%!important
}
td[style*="Roboto"] {
font-family: 'Roboto', Arial, Helvetica, sans-serif!important
}
td[style*="Open Sans"] {
font-family: 'Open Sans', arial, sans-serif !important
}
#media only screen and (max-width:640px) {
a[href="tel"],
a[href="sms"] {
text-decoration: none;
color: #ffffff;
pointer-events: none;
cursor: default;
}
tr.removemobile {
display: none;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=button] {
float: none;
}
table.removemobile {
display: none;
}
table.tablereset {
margin: 0 auto;
width: 440px !important;
line-height: 100% !important
}
table[class*=devicewidth] {
width: 440px!important;
text-align: center!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 400px!important;
text-align: center!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
img[class*=logoImg] {
width: 110px!important;
height: auto!important;
}
}
#media only screen and (max-width:479px) {
table.removemobile {
display: none;
}
table[class*=tablereset] {
margin: 0 auto;
width: 280px !important;
line-height: 100% !important
}
img[class*=logoImg] {
width: 100px!important;
height: auto!important;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=devicewidthright] {
width: 160px!important;
}
table[class*=devicewidth] {
width: 280px!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 240px!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
table[class*=button] {
float: none!important;
}
table[class*=button] td,
table[class*=button] td a {
font-size: 12px!important;
}
td[class*=oswaldfont] {
font-size: large!important;
}
}
<body style="margin:0; padding:0">
<div>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="640">
<table class="devicewidth" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="640">
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="58" width="640"> </td>
</tr>
<tr>
<td>
<p style="text-align: center">xyz</p>
</td>
</tr>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="18" width="640"> </td>
</tr>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="350">
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px; color:#b2b2b2;line-height: 18px;text-align: center;">
Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" width="640"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- pierwsza dwójka -->
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="640">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 20px;line-height:24px; color: #606060; font-weight: bold; text-transform: uppercase;">lorem ipsum </td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
</table>
</td>
</tr>
</table>
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="10">
<tr>
<td align="left" width="10">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="10">
<tr>
<td width="10" height="26">
<hr style="
border:none;border-left:1px solid hsla(200, 10%, 50%,100);height:20px;width:1px;
">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="devicewidthinner" align="right" border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum
<span style="color: red;text-decoration: line-through;">
<span style="color: #606060; font-weight: bold; font-size: 18px;">
100
</span>
</span>
</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 14px;line-height:24px;"><span style="font-weight: bold;">lorem ipsum </span><span style="color: #e4001b; font-weight: bold; font-size: 18px;">lorem ipsum</span></td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">
<p>lorem ipsum:</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span>lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="10"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="1280">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tr>
<td align="center" width="1280">
Zobacz
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Sample Fiddle..
There are too many extra tables used in your code, although i have updated your code. Please check the updated snippet. Hope it is helpful to you.
<body style="margin:0; padding:0">
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="58" width="640"> </td>
</tr>
<tr>
<td>
<p style="text-align: center">xyz</p>
</td>
</tr>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="18" width="640"> </td>
</tr>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="350">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px; color:#b2b2b2;line-height: 18px;text-align: center;">
Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="40" width="640"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- pierwsza dwójka -->
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;">
<tbody>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="left" width="317">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 20px;line-height:24px; color: #606060; font-weight: bold; text-transform: uppercase;">lorem ipsum </td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="1" valign="middle">
<span style="width:1px; height:20px; background:#000; display:block;"></span>
</td>
<td width="317" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tbody>
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum
<span style="color: red;text-decoration: line-through;">
<span style="color: #606060; font-weight: bold; font-size: 18px;">
100
</span>
</span>
</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 14px;line-height:24px;"><span style="font-weight: bold;">lorem ipsum </span><span style="color: #e4001b; font-weight: bold; font-size: 18px;">lorem ipsum</span></td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">
<p>lorem ipsum:</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span>lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="1280">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;">
<tbody>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="center" width="1280">
Zobacz
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
A line created with <hr> is (always) horizontal.
BUT, you can simply add a right border at the left column or a left border at the right column of the table.
Your css could look like this:
table tr td:first-child {
border-right: 1px solid #000000;
}
So every first cell in a row, gets a right border. To ensure you don't have gaps between rows you may also want to add the following attributes to your table:
table {
border-collapse: collapse;
border-spacing: 0;
}
I am using nodemailer to send email messages from my server (Node.js) and currently, i'm using this generic function:
// Generic Inner Function - Send Email
exports.sendEmail = function(email, message, emailType){
if((email)&&(message)&&(emailType)){
var subject;
if(emailType == "signUp")
subject = "Welcome to my site - 🙂";
if(emailType == "forgotPass")
subject = "Recovery Password from my site - 🔑";
if(emailType == "newResult")
subject = "We have Found New Results for you - 🛒";
if(emailType == "arrivedPrice")
subject = "Product Arrived - 🏴";
if(emailType == "tonePrice")
subject = "Product Arrived tone - 🏳️";
console.log("Send Email to: "+email+" / Email Type: "+emailType);
'use strict';
const nodemailer = require('nodemailer');
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: 'tester#gmail.com',
pass: 'test'
}
});
// setup email data with unicode symbols
let mailOptions = {
from: '"tom 🏏" <tester#gmail.com>', // sender address
to: email, // list of receivers
subject: subject, // Subject line
text: message, // plain text body
html: '<b>'+message+'</b>' // html body
};
// send mail with defined transport object
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
return console.log(error);
}
console.log('Message %s sent: %s', info.messageId, info.response);
});
}
};
Now, I was creating a new HTML messages that I want to send according to the action the user is doing and I am struggling with how to do it.
I want to use Nodemailer to do this operation and I didn't find information over the web.
Sample of the HTML message:
<!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" />
<title>A Simple Responsive HTML Email</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
img {height: auto;}
.content {width: 100%; max-width: 600px;}
.header {padding: 40px 30px 20px 30px;}
.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}
.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body[yahoo] .hide {display: none!important;}
body[yahoo] .buttonwrapper {background-color: transparent!important;}
body[yahoo] .button {padding: 0px!important;}
body[yahoo] .button a {background-color: #00ae9d; padding: 15px 15px 13px!important;}
body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;}
}
/*#media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
}*/
</style>
</head>
<body yahoo bgcolor="#f6f8f1">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table bgcolor="#ffffff" class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c7d8a7" class="header">
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="70" style="padding: 0 20px 20px 0;">
<img class="fix" src="email/logoC.png" width="70" height="70" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">
<tr>
<td height="70">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="subhead" style="padding: 0 0 0 3px;">
Tester
</td>
</tr>
<tr>
<td class="h1" style="padding: 5px 0 0 0;">
Chasing For You
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h2">
Welcome to Cricket !
</td>
</tr>
<tr>
<td class="bodycopy">
We're so happy you have joined our family!!!
<br/>
We founded Tester because we wanted to create a trustworthy app
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" style="padding: 0 20px 20px 0;">
<img class="fix" src="email/testimonial-bg.jpg" width="115" height="115" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bodycopy">
Tester offers a Chrome extension that lets you set a.
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#00ae9d" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45">
GET THE EXTENSION
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" style="padding: 0 20px 20px 0;">
<img class="fix" src="email/mobile.jpg" width="115" height="115" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bodycopy">
Tester is also offers an Android App that lets you.
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#00ae9d" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45">
GET THE APP
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<img class="fix" src="email/coffee3.jpg" width="100%" border="0" alt="" />
</td>
</tr>
<!--
<tr>
<td class="innerpadding bodycopy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
-->
<tr>
<td class="footer" bgcolor="#44525f">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footercopy">
® Copyright © 2017 - Designed & Developed by Cricket Team <br/>
<font color="#ffffff">Unsubscribe</font>
<span class="hide">from Test newsletter</span>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="http://www.facebook.com/">
<img src="email/facebook.png" width="37" height="37" alt="Facebook" border="0" />
</a>
</td>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="http://www.twitter.com/">
<img src="email/twitter.png" width="37" height="37" alt="Twitter" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
in my Django app I would like to put a background image in a table. The problem is that the image doesn't show. This is the code:
<table style="background-image: url('/static/assets/img/myimage.png') ;background-position: 0 100% !important;background-repeat: repeat-x ;background-size: 40px 3px">
Hello!
</table>
If I put the same css style in div object all work. Eg:
<div style="background-image: url('/static/assets/img/myimage.png') ;background-position: 0 100% !important;background-repeat: repeat-x ;background-size: 40px 3px">
Hello!
</div>
Where is my mistake? Thanks a lot for the help
EDIT1
I would like to insert a email html file in a django template. I use 'include' and all works for image but doesn't works for background-image style. The image location is correct (if I use 'div' and not 'table' all works). I have bootstrap
EDIT2
This the complete code. In the table I don't see the background image
<!-- ======= section ======= -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="34302d" style="background-image: url('http://themastermail.com/envato/omail/demo/layout2/img/testi-bg.jpg') !important; background-size: cover; background-position: top center; background-repeat: no-repeat;" background="http://themastermail.com/envato/omail/demo/layout2/img/testi-bg.jpg">
<tr><td height="60" style="font-size: 60px; line-height: 60px;"> </td></tr>
<tr>
<td align="center">
<table border="0" width="590" align="center" cellpadding="0" cellspacing="0" class="container590">
<tr>
<td>
<table border="0" width="580" align="center" cellpadding="0" cellspacing="0" class="container580">
<tr>
<td align="center" style="color: #b9bcc7; font-size: 16px; font-family: 'Open Sans', Calibri, sans-serif; line-height: 30px;" class="title_color">
<!-- ======= section text ====== -->
<div style="line-height: 30px">
<em>Proin eget massa tincidunt, lobortis ex nec, placerat odio. Mauris gravida nulla id laoreet ornare. Maecenas sagittis elit metus, eget pellentesque couleur non categorize rouge vert bleu.</em>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="35" style="font-size: 35px; line-height: 35px;"> </td></tr>
<tr>
<td align="center">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" width="80">
<img src="http://themastermail.com/envato/omail/demo/layout2/img/testi-img.png" style="display: block; width: auto;" width="70" border="0" alt=""/>
</td>
<td align="left" style="color: #ffffff; font-size: 14px; font-family: Raleway, Calibri, sans-serif; mso-line-height-rule: exactly; line-height: 24px;" class="title_color">
<!-- ======= section header ======= -->
<div style="line-height: 24px;">
Marta Clarcks<br>envato.com
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="60" style="font-size: 60px; line-height: 60px;"> </td></tr>
</table>
<!-- ======= end section ====== -->
You left out the ! on your !important tag.
<table style="background-image: url('/static/assets/img/myimage.png') !important;background-position: 0 100% !important;background-repeat: repeat-x !;background-size: 40px 3px">
Hello!
</table>
but as you've not got a tr, td etc in your field it may still not display it, you should try:
<table style="background-image: url('/static/assets/img/myimage.png') !important;background-position: 0 100% !important;background-repeat: repeat-x !;background-size: 40px 3px; display: block;">
<tr>
<td>
<p>hello</p>
</td>
</tr>
</table>
try this
<table style="background-image: url('static/assets/img/myimage.png') !important;background-position: 0 100% !important;background-repeat: repeat-x !;background-size: 40px 3px">
<tr><td>Hello!</td></tr>
</table>
folder structure
css.css
static/