I'm having trouble putting background image on MS Outlook. I already searched on Google and found out that you can put background on Outlook via VML.
The first background fruit-bg.jpg is working, but when I put the nested background yellow-bg.png its not appearing. And also the whole email design is destroyed. Can someone help me with this?
I'm using testi to test email on Outlook: https://testi.at/proj/kEpTkBrFm51uk54c6Pwh3xRcY
Here's my email HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body {
font-family: 'Georgia', 'Arial', sans-serif;
color: #000;
}
h1 {
font-family: 'Georgia', 'Arial', sans-serif;
font-size: 30px;
font-weight: bold;
color: #000;
}
p {
font-size: 13px;
}
h5 {
font-size: 11px;
font-weight: normal;
}
a.link, a.link:visited {
font-size: 13px;
color: #2b4a9c;
text-decoration: none;
border: 1px solid #2b4a9c;
padding: 5px;
}
a.link:hover {
font-size: 13px;
color: #ffac16;
text-decoration: none;
border: 1px solid #ffac16;
padding: 5px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table style="text-align: center;" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 600px;">
<table width="600" style="width: 600px; text-align: center;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="600" background="https://i.ibb.co/cNR3dvy/fruit-bg.jpg" style="background: url('https://i.ibb.co/cNR3dvy/fruit-bg.jpg') no-repeat center center; background-size: cover; padding-bottom: 35px;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://i.ibb.co/cNR3dvy/fruit-bg.jpg" style="width: 600px; height: 610px; border: 0; display: inline-block; " fill="true" stroke="false" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 600px; height:610px;">
<v:fill opacity="0%" color="#FFFFFF" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="600" style="width: 600px;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 50px 25px 0;">
<table width="550" style="width: 550px; padding: 0;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="550" background="https://i.ibb.co/RT5r3Ys/yellow-bg.png" style="background: url('https://i.ibb.co/RT5r3Ys/yellow-bg.png') no-repeat center center; background-size: cover; width: 550px; border-radius: 20px 60px 20px 60px; padding: 45px 40px 60px; box-shadow: -7px 8px 10px 3px #afafafb3; text-align: center;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://i.ibb.co/RT5r3Ys/yellow-bg.png" style="width: 550px; height: 500px; border: 0; display: inline-block; border-radius: 20px 60px 20px 60px; box-shadow: -7px 8px 10px 3px #afafafb3;" fill="true" stroke="false" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 550px; height:500px;">
<v:fill opacity="0%" color="#FFFFFF" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table style="margin: auto; position; relative;" width="470" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: center;">
<img style="display: inline-block; width: 140px; margin-bottom: 15px;" src="https://i.ibb.co/YXG85jF/some-photo.jpg" />
</td>
<td style="text-align: center; padding-left: 30px;">
<img style="width: 100%; margin-bottom: 15px;" src="https://i.ibb.co/YXG85jF/some-photo.jpg" />
<p style="font-family: 'Georgia', 'Arial', sans-serif; font-size: 14px; line-height: 23px; padding: 0 30px; color: #000;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi.
</p>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
</tr>
<tr style="background-color: #ffd000;">
<td style="padding: 35px 50px 55px;">
<p style="font-family: 'Georgia', 'Arial', sans-serif; font-size: 12px; color: #000;">
Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<p style="font-family: 'Georgia', 'Arial', sans-serif; font-size: 12px; color: #000;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Use this Method
sometime Emails doesn't support this style method style=background: url('');
This is work for me style=background-image: url();
No need to add like this background="https://i.ibb.co/cNR3dvy/fruit-bg.jpg"
Look at the example below
<td width="550" style="background-image: url(https://i.ibb.co/RT5r3Ys/yellow-bg.png); background-repeat:no-repeat; background-size: cover; width: 550px; border-radius: 20px 60px 20px 60px; padding: 45px 40px 60px; box-shadow: -7px 8px 10px 3px #afafafb3; text-align: center;">
Nested VML is problematic. It's essentially not workable.
I would throw out the rounded corners VML, and just go with the background. Outlook desktop will just have square corners.
The alternative is pretty advanced and finicky - search for the HTML Email Faux Absolute technique. It's absolute positioning for this kind of thing.
Related
built the following HTML for an email I am deploying. When I test in Litmus, the email looks great on all platforms except for Outlook. It appears one of the columns (the row with four imgs) breaks in Outlook desktop). The second image ends up moving to a new row.
FYI yes I know the image html may be wonky, I removed the original images that I was using in order to post in this group.
This is what the email block should look like:
code:
<!-- == Title Text And Three Column Section == --><table class="em_full_wrap" style="table-layout:fixed;" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#F8F8FB"> <tr>
<td valign="top" align="center">
<table class="em_wrapper" style="width:640px;" width="640" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
<tr>
<td class="em_side15" style="width:0px;" width="40">
</td><td valign="top" align="center">
<table class="em_wrapper" style="width:560px;" width="560" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td class="em_ptop" style="padding-top:40px; padding-left:40px;padding-right:40px;" valign="top" align="center">
<table class="em_wrapper" style="width:560px;" width="560" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<th class="em_defaultlink" style="color: rgb(37, 13, 83); font-family: "Arial", Arial, sans-serif; font-size: 22px; line-height: 27px; font-weight: bold; vertical-align: middle; height: 20px;" align="center">
Header Text</th></tr><tr>
<td class="em_defaultlink" style="color: rgb(37, 13, 83); font-family: "Arial", Arial, sans-serif; font-size: 22px; line-height: 27px; font-weight: bold; height: 20px;" align="center">
</td></tr><tr>
<td class="em_defaultlink" colspan="3" style="font-family:Arial, sans-serif; font-size:16px; line-height:22px; color:#666666;" valign="top" align="center">
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.</td></tr><tr>
<td class="em_h30" style="height: 20px;">
</td></tr><tr>
<td valign="top" align="center">
<table class="em_wrapper" style="width:520px;" width="520" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td valign="top" align="center">
<table class="em_wrapper" style="width:520px;" width="520" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td style="width: 130px; height: 20px;" valign="top" align="center">
<table class="em_wrapper" style="width:130px;" width="130" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td class="em_ptop" style="vertical-align: top; width: 130px; height: 30px;" align="center">
<a alias="" conversion="false" data-linkto="https://" href="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table><!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]--><table class="em_wrapper" style="width:127px;" width="127" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td class="em_ptop" style="width: 130px; height: 30px;" valign="top" align="center">
<a alias="" conversion="false" data-linkto="https://" href="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table><!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]--><table class="em_wrapper" style="width:130px;" width="127" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td class="em_ptop" style="width: 127px; height: 30px;" valign="top" align="center">
<a alias="" conversion="false" data-linkto="https://" href="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table><table class="em_wrapper" style="width:130px;" width="130" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td class="em_ptop" style="width: 127px; height: 30px;" valign="middle" align="center">
<a alias="" conversion="false" data-linkto="" title=""><img alt="Resources to support your mental well-being." data-assetid="144028" src="http://image.em.com/lib/fe8e13727c640d7e76/m/5/image+holder.png" style="display: block; max-width: 127px; color: #000000; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px; font-weight: bold; padding: 0px; height: 65px; width: 95px; text-align: center;" width="95" height="65"></a></td></tr></table></td></tr></table></td></tr></table></td></tr><tr>
<td class="em_h20" style="height: 15px;">
</td></tr><tr>
<td class="em_h20" colspan="3" align="center">
<span style="font-family: Arial, sans-serif; font-size: 16px; line-height: 24px; color:#501CD2; padding: 0px; vertical-align: middle; height: 20px;"><span style="font-size:16px;"><a alias="CTA" conversion="false" data-linkto="https://" href="" style="color:#501cd2;text-decoration:underline;" title="CTA">CTA</a></span></span></td></tr><tr>
<td class="em_h20" style="height: 40px;">
</td></tr><tr>
<td class="em_defaultlink" style="color:#501CD2;font-family:'Montserrat', Arial, sans-serif;font-size:14px;line-height:18px;font-weight:bold;" align="center">
</td></tr><tr>
</tr></table></td></tr></table></td><td class="em_side15" style="width:40px;" width="40">
</td></tr></table></td></tr></table><!-- == // END Title Text And Three Column Section == -->
`
I have found in Outlook desktop that if the sum of the table column widths is exactly the width of the parent table Outlook will push one of the tables to another row. I would suggest reducing the column table widths to 128px.
You can also keep the column table width as is and try to use Outlook specific CSS to eliminate the horizontal margin | padding | border | spacing that Outlook is applying to the column tables.
https://stigmortenmyre.no/mso/html/concepts/ofconstyletable.htm?filter=mso-
Issue
I tested my email in Litmus and it renders at half the size of the email window only in iOS mobile phones as shown here. It sounds like Apple made this update in iOS 10 so users would have the ability to zoom into their email. I need help getting the responsive email rendering to the full width on iOS phones.
Troubleshooting
When I remove all of my css styles, it renders properly (full width) on the phone. But I need the email to be responsive.
Online solutions that are not working for me
I have seen this question online in a couple of places like here and here with the solution being as simple as adding this meta tag inside the <meta name="x-apple-disable-message-reformatting" />.
<meta name="viewport" content="width=device-width, initial-scale=1.0" shrink-to-fit="no">
body { width: 100%; max-width: 600px; }
<body style="width: 100%; max-width: 600px;>
Setting the table widths to 100% with max-width: 600px;
Here is my Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1.0" shrink-to-fit="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta class="mktoColor" id="headlineColor" mktoname="Headline Color" default="#003a70">
<meta class="mktoColor" id="textColor" mktoname="Main Text Color" default="#333333">
<meta class="mktoColor" id="mkto-callout-text-bg-color" mktoname="Callout BG Color" default="#00843d">
<meta class="mktoColor" id="mkto-callout-text-color" mktoname="Callout Text Color" default="#ffffff">
<meta class="mktoColor" id="mkto-cta-text-link" mktoname="CTA Text Link Color" default="#00843d">
<meta class="mktoColor" id="mkto-cta-button-bg-color" mktoname="CTA BTN Bg Color" default="#003a70">
<meta class="mktoColor" id="mkto-footer-link-color" mktoname="Footer Link Color" default="#418fde">
<title>Test</title>
<style type="text/css">
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
min-width: 100% !important;
-webkit-text-size-adjust:none !important;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
.ExternalClass {
width: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
img {
-ms-interpolation-mode: bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
}
</style>
<style type="text/css">
.button-td, .button-a {
transition: all 100ms ease-in;
}
/* Media Queries */
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
}
.fluid, .fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
.stack-column, .stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
.stack-column-center {
text-align: center !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;
}
}
</style>
</head>
<body bgcolor="#f2f2f2" width="100%" style="margin: 0; min-width: 100%; -webkit-text-size-adjust:none;" yahoo="yahoo">
<table bgcolor="#f2f2f2" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tbody>
<tr>
<td>
<center style="width: 100%;">
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container mktoContainer" id="mkto-container" style="width: 600px;">
<tr class="mktoModule" id="logo-container" mktoname="Header logo">
<td style="padding: 20px 0; text-align: center">
<div class="mktoImg" id="header-logo-image" mktoname="Header Logo Image" mktolockimgsize="true">
<img src="" width="250" height="50" style="">
</div> </td>
</tr>
<tr class="mktoModule" id="body-copy-section" mktoname="Body copy with headline">
<td style="padding-left: 40px; padding-right: 40px; padding-top: 0px; padding-bottom: 0px;">
<div class="mktoText" id="headlineText" mktoname="Headline">
<p style="text-align: center; font-family: 'Arial', Helvetica, sans-serif; font-size: 24px; mso-height-rule: exactly; line-height: 32px; color: ${headlineColor};"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="mktoText" id="Paragraph1text" mktoname="Paragraph Text">
<p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. <u>This is a link, it is underlined and the hex code is #eb6b19.</u> </p>
</div> </td>
</tr>
<tr class="mktoModule" id="hero-container" mktoname="Hero Image">
<td class="full-width-image">
<div class="mktoImg" id="hero-banner-image" mktoname="Hero Banner Image" mktolockimgsize="true">
<img src="" width="600" alt="alt_text" style="width: 100%; max-width: 600px; height: auto;">
</div> </td>
</tr>
<tr class="mktoModule" id="centered-btn" mktoname="CTA Button">
<td>
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tbody>
<tr>
<td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td">
<a href="" style="background: ${mkto-cta-button-bg-color}; border: 15px solid ${mkto-cta-button-bg-color}; padding: 0 10px;color: #ffffff; font-family: 'Arial', Helvetica, sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a" id="mkto-button" mktoName="Button">
CTA BUTTON 1
</a>
</td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="video-screenshot" mktoname="video screenshot">
<td class="full-width-image">
<div class="mktoImg" id="full-width-image" mktoname="Full Width Image" mktolockimgsize="true">
<img src="" width="600" alt="Image" style="width: 100%; max-width: 600px; height: auto;">
</div> </td>
</tr>
<tr class="mktoModule" id="bullet-group" mktoname="Bulleted List">
<td style="padding-right: 40px; padding-left: 40px; padding-top: 0px; padding-bottom: 0px;">
<div class="mktoText" id="Paragraph2text" mktoname="Paragraph Text">
<p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};">Maecenas sed ante pellentesque:</p>
</div>
<div class="mktoText" id="bulletedList" mktoname="Bulleted List">
<ul>
<li style="margin-bottom: 10px; margin text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li style="margin-bottom: 10px; text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li style="margin-bottom: 10px; text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div> </td>
</tr>
<tr class="mktoModule" id="signature" mktoname="Signature">
<td style="padding-right: 40px; padding-left: 40px; padding-top: 0px; padding-bottom: 0px;">
<div class="mktoText" id="Paragraph3text" mktoname="Paragraph Text">
<p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};"> Regards, <br> <br> <strong><span style="color: #003a70">Our Team</span></strong><br></p>
</div> </td>
</tr>
<tr class="mktoModule" id="three-col-img-text" mktoname="Three columns with image and text">
<td align="center" valign="top" style="padding: 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td width="33.33%" class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="lower-left-image" mktoname="Lower Left Image" mktolockimgsize="true">
<img src="" width="170" height="170" alt="alt_text" class="fluid">
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="lowerLeftImageText" mktoname="Lower Left Image Text">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="33.33%" class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="lower-middle-image" mktoname="Lower Middle Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" height="170" alt="alt_text" class="fluid">
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="lowerMiddleImageText" mktoname="Lower Middle Image Text">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="33.33%" class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="lower-right-image" mktoname="Lower Right Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" height="170" alt="alt_text" class="fluid">
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="lowerRightImageText" mktoname="Lower Right Image Text">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="callout-box" mktoname="Callout Box">
<td bgcolor="${mkto-callout-text-bg-color}" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td valign="middle" style="text-align: center; padding: 40px;">
<div class="mktoText" id="calloutText" mktoname="Callout Box Text">
<p style="text-align: center; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${mkto-callout-text-color};;"> <strong>Call out box:</strong> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. </p>
</div> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="mktoModule" id="two-col-img-text" mktoname="Two columns with image and text">
<td align="center" valign="top" style="padding: 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="top-left-image" mktoname="Top Left Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-270x270.png" width="270" height="270" alt="alt_text" class="fluid">
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="topLeftImageText" mktoname="Top Left Image Text">
<p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div> </td>
</tr>
</tbody>
</table> </td>
<td class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 10px; text-align: center">
<div class="mktoImg" id="top-right-image" mktoname="Top Right Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-270x270.png" width="270" height="270" alt="alt_text" class="fluid">
</div> </td>
</tr>
<tr>
<td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="topRightImageText" mktoname="Top Right Image Text">
<p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="left-img-right-copy" mktoname="Left image, right copy">
<td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="33.33%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;">
<div class="mktoImg" id="bottom-left-image" mktoname="Bottom Left Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" alt="alt_text" class="center-on-narrow">
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="66.66%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="bottomImageText1" mktoname="Bottom Image Text 1">
<strong style="color:${textColor};">Class aptent taciti sociosqu</strong>
<br>
<br> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br>
<br>
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tbody>
<tr>
<td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td"><a href="" style="background: ${mkto-cta-button-bg-color}; border: 15px solid ${mkto-cta-button-bg-color}; padding: 0 10px;color: #ffffff; font-family: 'Arial', Helvetica, sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
CTA BUTTON 2
</a> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="right-img-left-copy" mktoname="Right image, left copy">
<td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="33.33%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;">
<div class="mktoImg" id="bottom-right-image" mktoname="Bottom Right Image" mktolockimgsize="true">
<img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" alt="alt_text" class="center-on-narrow">
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="66.66%" class="stack-column-center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td dir="ltr" valign="top" style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 10px; text-align: left;" class="center-on-narrow">
<div class="mktoText" id="bottomImageText2" mktoname="Bottom Image Text 2">
<strong style="color:${textColor};">Class aptent taciti sociosqu</strong>
<br>
<br> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br>
<br>
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tbody>
<tr>
<td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td"> CTA BUTTON 3 </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" id="thick-divider" mktoname="CC, Phone and Web link">
<td class="full-width-image">
<div class="mktoImg" id="footer-image" mktoname="Footer Image" mktolockimgsize="true">
<img src="" width="600" alt="" style="width: 100%; max-width: 600px; height: auto;">
</div> </td>
</tr>
</table>
</center> </td>
</tr>
</tbody>
</table>
</body>
</html>
Just as I found out on chat, the issue was table fixed CSS that was causing the issue. Once you removed it, the tables start going full width.
Before:
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
After:
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
margin: 0 auto !important;
}
Cheers
I am practicing HTML emailing lately and I have come up with some trouble using tables. Right now, the content of a <td> is bigger than the <td> itself.
So how do you make a td adjust its size according to its content? I feel like the rest of the td's on this email worked just fine. Notice that what is giving me trouble is an <a> to which I have given some padding to style as a button.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 45%;">
<table border="1" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;">
<tr>
<td>
<img src="house1.jpg" width="300" height="200">
</td>
</tr>
<tr>
<td align="center">
<h6 style="font-size: 16px; font-weight: 900; margin: 0; padding: 10px 10px 10px 10px;">Modern House of such style</h6>
<p style="font-size: 14px; font-weight: 400; margin: 0; padding: 0 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.</p>
</td>
</tr>
<tr>
<td align="center">
CLICK HERE
</td>
</tr>
</table>
</td>
</tr>
</table>
This last td is the one giving me some trouble. Any ideas?
Use Display property for content like display:block; or display:inline-block check this example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 45%;">
<table border="1" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;">
<tr>
<td>
<img src="house1.jpg" width="300" height="200">
</td>
</tr>
<tr>
<td align="center">
<h6 style="font-size: 16px; font-weight: 900; margin: 0; padding: 10px 10px 10px 10px;">Modern House of such style</h6>
<p style="font-size: 14px; font-weight: 400; margin: 0; padding: 0 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.</p>
</td>
</tr>
<tr>
<td align="center">
CLICK HERE
</td>
</tr>
</body>
</html>
This is a silly problem, but have tried everything I can think of and still can't figure out how to center these two cells of text in Outlook 2003.
Here's a link to the full html file: https://github.com/justintemps/flash-updates/blob/master/dest/index-prod.html?ts=4
The offending (part that won't center) is below.
<table class="body" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0 auto 0 auto; text-align: center;">
<tbody>
<tr>
<td align="center" style="text-align: center;">
<center>
<table class="bodyContainer" align="center" width="600" style="margin: 0 auto; max-width: 600px; padding-top: 5px; table-layout: fixed; text-align: center; width: 100%;">
<tbody>
<tr align="center">
<td class="mainImageContainer" align="center" style="margin: 0 auto; text-align: center;">
<!-- INSERT LINK HERE -->
<a href="" target="_blank">
<!-- INSERT IMAGE URL HERE -->
<img class="mainImage" width="600" alt="" src="http://www.ilo.org/wcmsp5/groups/public/---dgreports/---dcomm/documents/image/wcms_484941.jpg" style="margin: 0 auto; max-width: 600px; padding-top: 5px; table-layout: fixed; text-align: center; width: 100%;">
</a>
</td>
</tr>
<tr align="center">
<td class="mainTitleContainer" align="center" width="600" style="margin: 0 auto; text-align: center;">
<!-- INSERT LINK HERE -->
<a class="noDecorate" href="" target="_blank" style="text-decoration: none;">
<h2 class="mainTitle" style="font-family: Helvetica, Arial, sans-serif; color: #2f2f2f; margin: 0; padding-top: 5px; padding-bottom: 5px; text-align: left;">The International Labour Conference 2016 starts</h2>
</a>
</td>
</tr>
<tr align="center">
<!-- INSERT SUMMARY HERE -->
<td class="bodyText" align="center" width="600" style="font-family: georgia, Palatino, 'Times New Roman', serif; font-size: 14px; line-height: 20px; text-align: left;">
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.
<span>
<!-- INSERT LINK HERE -->
<a class="decorate" href="" target="_blank" style="text-decoration: none; color: #37468E; font-weight: bold;">Read More»</a>
</span>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
You have a few text-align:left;'s in there that are overriding the centering you're doing in parent tags.
...padding-bottom: 5px; text-align: left;">The International...
and
...line-height: 20px; text-align: left;">Lorem ipsum dolor sit...
If you remove the text-align:left; from the examples above, these areas should center justify.
it's work.please copy in all HTML body tag like here
I'm trying to figure out why my HTML email is doing this:
I feel like I've made it responsive (on browsers and email clients that support media queries) since I've replaced the fixed width with percentage-based width everywhere. None of the widths of the cells/tables inside add up to more than 400 pixels and yet it gets stuck around there. Anyone want to help me find the culprit? Which element is causing the trouble?
Fiddle: https://jsfiddle.net/j7y75g7t/.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
[class="width-100-pct"] { width: 100% !important; }
#media (max-width: 600px) {
h1, h2, p { text-align: center !important; }
img[class="responsive-image"] { width: 100% !important; height: auto !important; }
[class="width-100-pct-on-mobile"] { width: 100% !important; }
[class="width-75-pct-on-mobile"] { width: 75% !important; }
[class="width-third-on-mobile"] { width: 33.33333% !important;}
[class="width-25-pct-on-mobile"] { width: 25% !important; }
[id="prequal-btn"] { width: 50% !important; height: auto !important; }
}
</style>
</head>
<body style="margin:0;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#F1F1F3" style="width:100%;">
<!-- TOP BLUE STRIP -->
<table cellpadding="0" cellpadding="0" border="0" class="width-100-pct-on-mobile">
<tr>
<td bgcolor="#1B5D9B" style="width:100%;">
<table cellpadding="10" cellspacing="0" border="0">
<tr>
<td width="605" class="width-75-pct-on-mobile">
</td>
<td width="195" style="text-align:right; padding: 10px;" class="width-25-pct-on-mobile">
<img width="175" height="70" src="http://i.imgur.com/4O8j7xp.png?1" style="width:175px;height:70px;border:0;margin:0;outline:0;" class="responsive-image"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- CONTAINED BODY -->
<table align="center" cellpadding="0" cellpadding="10" border="0" width="600" class="width-100-pct-on-mobile">
<!-- HEADLINE ROW -->
<tr>
<td style='font-size: 22pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-align:center; text-transform:uppercase;padding-top:20px;padding-bottom:20px;'>
<h1 style='font-size: 22pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-align:center; text-transform:uppercase;margin:0;'>HEADLINE</h1>
</td>
</tr>
<!-- IMAGE-HEADLINE-SUBTEXT ROW -->
<tr>
<td width="600" bgcolor="#FFFFFF" style='padding:10px; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000;border-radius:10px;' class="width-100-pct-on-mobile">
<p><img src="http://i.imgur.com/8LX3Chz.png" width="580" height="145" style="width:580px;height:145px;border:0;margin:0;outline:0;" class="responsive-image"/></p>
<h2 style='font-size: 18pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-transform:uppercase;margin-bottom:5px;'>SUBHEADLINE</h2>
<p style='font-size: 10pt; line-height: 11pt; font-family: sans-serif, Arial; color: #000; font-weight:600;'>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>
<p style="text-align:right;" class="orange-button-holder"><img src="http://i.imgur.com/DJmCHC4.png?1" width="107" height="27" style="width:107px;height:27px;border:0;margin:0;outline:0;"/></p>
</td>
</tr>
<!-- EMPTY SPACE ROW -->
<tr>
<td width="600" style="width:600px;padding-top:10px;padding-bottom:10px;" class="width-100-pct-on-mobile">
</td>
</tr>
<!-- IMAGE-HEADLINE-SUBTEXT ROW -->
<tr>
<td width="600" bgcolor="#FFFFFF" style='padding:10px; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000;border-radius:10px;' class="width-100-pct-on-mobile">
<p><img src="http://i.imgur.com/1Ye4ktl.png" width="580" height="291" style="width:580px;height:291px;border:0;margin:0;outline:0;" class="responsive-image"/></p>
<h2 style='font-size: 18pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-transform:uppercase;margin-bottom:5px;'>SUBHEADLINE</h2>
<p style='font-size: 10pt; line-height: 11pt; font-family: sans-serif, Arial; color: #000; font-weight:600;'>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>
<p style="text-align:right;" class="orange-button-holder" ><img src="http://i.imgur.com/DJmCHC4.png?1" width="107" height="27" style="width:107px;height:27px;border:0;margin:0;outline:0;"/></p>
</td>
</tr>
<!-- PREQUALIFY BUTTON ROW -->
<tr>
<td width="600" style="padding-top: 20px; padding-bottom: 20px; text-align:center;" class="width-100-pct-on-mobile">
<p style="margin:0; text-align:center;"><img src="http://i.imgur.com/q6hpze5.png?1" width="288" height="55" style="width:288px;height:55px;border:0;margin:0;outline:0;" id="prequal-btn"/></p>
</td>
</tr>
<!-- AWARD LOGOS -->
<tr>
<td width="600" bgcolor="#FFFFFF" style="padding:10px; border-radius:10px;" class="width-100-pct-on-mobile">
<table cellpadding="0" cellspacing="0" border="0" class="width-100-pct">
<tr>
<td valign="middle" width="200" style="text-align:center;" class="width-third-on-mobile">
<img src="http://i.imgur.com/5OqBS39.png" width="36" height="63" style="width:36px;height:63px;border:0;margin:0;outline:0;"/>
</td>
<td valign="middle" width="200" style="text-align:center;" class="width-third-on-mobile">
<img src="http://i.imgur.com/EwNyPSW.png" width="64" height="63" style="width:64px;height:63px;border:0;margin:0;outline:0;"/>
</td>
<td valign="middle" width="200" style="text-align:center;" class="width-third-on-mobile">
<img src="http://i.imgur.com/wZjpm07.png" width="89" height="63" style="width:89px;height:63px;border:0;margin:0;outline:0;"/>
</td>
</tr>
</table>
</td>
</tr>
<!-- PHONE NUMBER -->
<tr>
<td width="600" style="padding-top:20px;padding-bottom:20px;" class="width-100-pct-on-mobile">
<p style='text-align:left;font-family:Georgia,"Times New Roman",Times,serif;color:#939598;margin:0;font-weight:bold;'>The Guidant Team</p>
<p style='text-align:left;font-family:Georgia,"Times New Roman",Times,serif;margin:0;font-weight:bold;'><a href="tel:888-472-4455" style='color:#1e70b8;text-decoration:underline;font-family:Georgia,"Times New Roman",Times,serif;font-weight:bold;'>888.472.4455</a></p>
</td>
</tr>
<!-- Disclaimer -->
<tr>
<td width="600" style="padding:20px 100px;text-align:center;font-family: sans-serif, Arial; font-size: 9pt; color:#000;font-weight:bold;" class="width-100-pct-on-mobile">
<p style="text-align:center;font-family: sans-serif, Arial; font-size: 9pt; color:#000; margin:0; font-weight:bold;">Guidant Financial | 1100 112th Ave NE Ste 100 | Bellevue, WA 98004</p>
<p style="text-align:center;font-family: sans-serif, Arial; font-size: 9pt; color:#000; margin:0; font-weight:bold;">This email was sent by MitchellLarsen#guidantfinancial.com. If you no longer want to receive these emails you may unsubscribe at any time.</p>
</td>
</td>
</table>
</td>
</tr>
</table>
</body>
</html>
You should first of all clean up the code and create a separate CSS file and define classes and their styles there.
Then:
You have several width properties assigned to elements that overlap / overwrite each other and then enforce that override with "!important".
<table align="center" cellpadding="0" cellpadding="10" border="0" width="600" class="width-100-pct-on-mobile">
It is bad practice to overwrite parameters with "!important" all the time.
One idea to do this is to put everything a container element that has 100% and a padding.
The cards then can be 100% width and centered and they will then be fully responsive.
An important thing to remember is when you want to center floating, responsive elements with unknown (percentage ) size is that you have to create wrapping "helper" elements, like such:
.centerWrapper {
float: right;
position: relative;
left: -50%;
}
.container {
position: relative;
left: 50%;
max-width: 600px;
text-align: center;
}
.card {
max-width: 100%;
display: inline-block;
}
and then HTML
<div class="centerWrapper">
<div class="container">
<div class="card">...</div>
</div>
</div>
I made a fiddle for you which shows this very roughly.
It shows a fluid / responsive layout based on percentages without the need for and media queries breakpoints. You can still add #media breakpoints, to change font-sizes, for example.
https://jsfiddle.net/yphfgx51/2/