I'm trying to create an Email HTML template using XHTML document.
I was trying to test the document using "Markup Validation Service" but without success. I got 2 errors and I was trying to figure it out and did some changes but it doesn't fix.
This is my code:
<!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>Welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
</head>
<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border: 1px solid #cccccc;">
<tr>
<td align="center" bgcolor="#70bbd9" style="padding: 2px 2px 2px 2px;">
<img src="img/coffee2.jpg" alt="Welcome to Cricket" width="600" height="400" style="display: block;" />
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 10px 30px 20px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 20px 0; font-family:lato; line-height: 140%;">
We're so happy!!!
<br/>
We founded this because we wanted to create a trustworthy app.
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="img/testimonial-bg.jpg" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0; font-family:lato; line-height: 140%;">
<h4>Extension</h4>
<a href="http://www.google.com"><button style="margin:33px 0 0 15px;color: black;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;
font-size: 14px; background-color: Transparent;
background-repeat:no-repeat;
border: 1px solid black;
cursor:pointer;overflow: hidden;outline:none;">GET THE EXTENSION</button></a>
</td>
</tr>
</table>
</td>
<td style="font-size: 0; line-height: 0;" width="20">
</td>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="img/technology-1940695_1920.jpg" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0; font-family:lato;line-height: 140%;">
<h4>Application</h4>
<a href="http://www.google.com"><button style="margin:10px 0 0 50px;color: black;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;
font-size: 16px; background-color: Transparent;
background-repeat:no-repeat;
border: 1px solid black;
cursor:pointer;overflow: hidden;outline:none;">GET THE APP</button></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#363940" style="padding: 30px 30px 30px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<td width="90%" style="font-family:lato; color:#ffffff;">
® Copyright © 2017 <br/>
</td>
<td align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0; line-height: 0;" width="20"> </td>
<td>
<a href="http://www.facebook.com/">
<img src="img/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
What am I missing ?
Thank you.
The Markup Validation Service says:
Line 84, Column 70: document type does not allow element "td" here;
assuming missing "tr" start-tag
A <td> must be inside of a <tr>.
<table>
<tr>
<td></td>
</tr>
</table>
This is the 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
</head>
<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border: 1px solid #cccccc;">
<tr>
<td align="center" bgcolor="#70bbd9" style="padding: 2px 2px 2px 2px;">
<img src="img/coffee2.jpg" alt="Welcome to Cricket" width="600" height="400" style="display: block;" />
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 10px 30px 20px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 20px 0; font-family:lato; line-height: 140%;">
We're so happy!!!
<br /> We founded this because we wanted to create a trustworthy app.
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="img/testimonial-bg.jpg" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0; font-family:lato; line-height: 140%;">
<h4>Extension</h4>
<a href="http://www.google.com">
<button style="margin:33px 0 0 15px;color: black;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;
font-size: 14px; background-color: Transparent;
background-repeat:no-repeat;
border: 1px solid black;
cursor:pointer;overflow: hidden;outline:none;">
GET THE EXTENSION
</button>
</a>
</td>
</tr>
</table>
</td>
<td style="font-size: 0; line-height: 0;" width="20">
</td>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="img/technology-1940695_1920.jpg" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0; font-family:lato;line-height: 140%;">
<h4>Application</h4>
<a href="http://www.google.com">
<button style="margin:10px 0 0 50px;color: black;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;
font-size: 16px; background-color: Transparent;
background-repeat:no-repeat;
border: 1px solid black;
cursor:pointer;overflow: hidden;outline:none;">
GET THE APP
</button>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#363940" style="padding: 30px 30px 30px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="90%" style="font-family:lato; color:#ffffff;">
® Copyright © 2017 <br />
</td>
<td align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0; line-height: 0;" width="20"> </td>
<td>
<a href="http://www.facebook.com/">
<img src="img/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Related
I have an HTML email template that renders very well on all mail clients except the Outlook Desktop application. In the Outlook client, the image, as well as the table elements, are blown up in terms of size leading to a terribly formatted email being displayed. How should I address this issue so that it at least renders well on the Outlook desktop client? I am aware of using conditional logic to add dynamic pixel values depending on what client will be rendering the template but I need to know what styling changes I should make to make Outlook's rendering engine display the template properly. Below is the HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Click Source</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
*{margin: 0; padding: 0;}
body{font-family: 'Montserrat', sans-serif;margin: 0; padding: 0;}
#media(max-width:767px){
h3{font-size: .75em !important;}
p{font-size: 10px !important;}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="max-width:600px; width: 100%; margin: 0 auto;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="top" valign="top">
<img src="https://clicksource.uk/static/images/head.jpg" alt="" style="width: 650px;"/>
</td>
</tr>
<tr>
<td valign="top" align="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 60%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef; padding: 12px; padding-left: 5px; padding-top: 45px;">
<tr>
<td style="width: 30%;">
<img src="https://clicksource.uk/static/images/mobile.jpg" alt="" style="width: 150px"/>
</td>
<td style="width: 50%; text-align: center;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 10px 0;">GET ON THE
TOP 3 OF
GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500;">Hello, {{first_name}} {{last_name}}. It's essential to be at the top
of Google search results. If
your business isn't there,
you're losing potential
customers to your
competitors already in the
top 3.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 40%; background: #f5f5ef;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef;">
<tr>
<td>
<img src="https://clicksource.uk/static/images/location.jpg" alt="" style="width: 250px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 55%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #fff; padding: 20px 0 10px 0; text-align: center;" >
<tr>
<td style="width: 100%; text-align: center; padding: 15px;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 15px 0;">GET YOUR BUSINESS
SHOWN ON GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500; margin: 0; padding: 0 15px;">Google Business Profile is another
crucial element for getting your
business in front of new customers! The
Google business platform allows
business owners greater control over
their information on Google search
results, specifically for their physical
location and service areas.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 45%; padding-right: 10px;align-items: center;" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="https://clicksource.uk/static/images/local-seo-email-video-ph.PNG" alt="Promo vid" width="250px" height="132px"><br>
CLICKSOURCE.CO.UK
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="background: #0C2840; background-size: cover; background-position: center center">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="30" cellspacing="0" width="100%" style="align-items: center;">
<tr>
<td valign="top" style="padding: 15px; width: 20%;">
<img src="https://clicksource.uk/static/images/footer-icon-logo.png" alt="" style="width: 100px;"/>
</td>
<td valign="top" style="text-align: center; padding: 15px; width: 60%;">
<img src="https://clicksource.uk/static/images/footer-logo.jpg" alt="" style="width: 120px;"/>
<ul style="text-align: center; padding: 0; margin: 0;">
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/call.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> 020 3832 2400 </li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/website.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> www.clicksource.co.uk</li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/email.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Hello#clicksource.co.uk</li>
<li style="display: inline-block; list-style: none;color:#fff; font-size: 10px;"><img src="https://clicksource.uk/static/images/location-icon.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Cuffley Place, Sopers Road, EN6 4SG</li>
</ul>
</td>
<td valign="top" style="width: 20%;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Any one can help me with this. I don't get why my text is justified but not centered. On big screens it is fine, but on the iPhone screen it is justified but slightly to the left of the screen. How can I center the text and make it justified at the same time? Please help me rectify the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>*|MC:SUBJECT|*</title>
<!-- DELETE AND REPLACE WITH YOUR OWN TITLE IF NOT USING MAILCHIMP -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#media (max-width: 700px){
.responsive{
width:100% !important;
padding-left:2% !important;
padding-right:2% !important;
text-align:center-justify !important;
margin-left:auto !important;
margin-right:auto !important;
}
} #media (max-width: 700px){
.height{
height:auto !important;
text-align:center !important;
}
} #media (max-width: 700px){
.responsive img{
width:100% !important;
height:auto !important;
text-align:center !important;
}
} #media (max-width: 700px){
*{
font-size:12px;
}
}</style></head>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" bgcolor="#ffffff">
<!-- START SECTION ONE -->
<table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table bgcolor="#ffffff" align="center" style="width:100%;max-width:640px;border-bottom:1px solid #707070;">
<tr>
<td align="center" style="padding:0px 0px 0px 0px;">
<table align="center" style="width:100%;max-width:620px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" style="width:100%;margin-left:auto;margin-right:auto;">
<tr>
<td width="100%" align="right" style="padding:10px;text-decoration:none;color:#000000;font-size:10px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;">
</td>
</tr>
<tr>
<td width="100%" align="center" style="padding:0px 0px 0px 0px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/8522c4a9-c0fd-445f-9e6a-413d2fb16b7b.jpeg" width="90%" border="0" alt="logo.png">
</td>
</tr>
</table>
<table align="center" style="width:100%;max-width:600px;" border="0" cellpadding="0" cellspacing="0" class="responsive">
<tr>
<td align="center" width="100%" style="padding:10px 10px 10px 10px;font-size:14px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;line-height:20px;" class="responsive">
<!-- your navigation bar below -->
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/about">
ABOUT US
</a>
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/about#!contact">
BROKERS
</a>
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/home#!contact">
CONTACT
</a>
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="www.">
PROPERTIES
</a>
<!-- your navigation bar above -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END SECTION ONE -->
<!-- START SECTION TWO -->
<table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table bgcolor="#ffffff" align="center" style="width:100%;max-width:640px;border-bottom:1px solid #707070;">
<tr>
<td align="center" style="padding:20px 0px 10px 0px;">
<table style="width:100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!----------------------- PHOTO 1 ----------------------->
<table align="center" style="width:100%;height:auto;" class="responsive">
<tr>
<td width="100%" align="center" style="padding:0px 0px 0px 0px;" class="responsive padding-bottom-image">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/e45c27ca-a768-464b-8f17-cca76f8ff0af.gif" width="600" height="280" alt="gif">
</td>
</tr>
</table>
<!----------------------------- PHOTO 1 ----------------------->
<table align="center" style="width:100%;min-width:250px;margin-left:auto;margin-right:auto;" class="responsive height">
<tr>
<td align="center" style="padding:20px 0px 0px 0px;font-size:20px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:2px;" class="responsive padding">
TIPS FOR INSTAGRAM
</td>
</tr>
<tr>
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
</tr>
<tr>
<td align="justify" style="font-size:14px;line-height:24px;font-family:Helvetica, Arial, sans-serif;color:#000000;letter-spacing:1px;padding:0px 0px 0px 0px;" class="responsive">
Did you know that in 2017 Instagram saw the fastest user growth rate in its
history — instead of slowing down, it’s actually growing faster these days. Instagram is the platform to beat right now. People are there, the growth is there, the
engagement is happening, and the creative and advertising tools are available to all.
</td>
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
</tr>
<tr>
<td align="center" style="padding:30px 0px 10px 0px;font-size:15px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
<hr style="width:30px;background-color:#707070;color:#707070;height:0px;">
LET'S MEET | DISCUTONS
</td>
</tr>
<tr>
<td align="center" style="font-size:12px;line-height:10px;font-family:Helvetica, Arial, sans-serif;color:#000000;letter-spacing:1px;padding:0px 0 20px 0;" class="responsive">
emailadress
<!-- END SECTION FOUR -->
<!-- START SECTION FIVE -->
<table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table bgcolor="#ffffff" align="center" style="width:100%;max-width:640px;">
<tr>
<td align="center" style="padding:20px 0px 0px 0px;">
<table style="width:100%;max-width:600px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" style="width:90%;" class="responsive">
<tr>
<td align="center" style="font-size:12px;line-height:16px;font-family:Verdana, Helvetica, Arial, sans-serif;color:#333333;padding:15px 0 5px 0;">
© 2018. Mellor Group, All rights reserved.
</td>
</tr>
<tr>
<td align="center" style="font-size:12px;line-height:16px;font-family:Verdana, Helvetica, Arial, sans-serif;color:#333333;padding:5px 0 15px 0;">
</td>
</tr>
</table>
<!-- SOCIAL ICONS -->
</td>
</tr>
<tr>
<td align="center" style="padding:0px 0px 20px 0px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/0c0a64f4-17ae-4251-8e57-c0f132bd1453.png" width="25" height="25" alt="facebook icon">
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/121a7d4d-aff4-46db-b815-7ba26a405185.png" width="25" height="25" alt="facebook icon">
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/4ef59692-55f3-4b8f-a966-5290c968d50a.png" width="25" height="25" alt="linkedin icon">
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/1eeeed4b-1377-4f25-89f0-e87215193ac5.png" width="25" height="25" alt="instagram icon">
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/36510e9f-1dc7-4f88-b29c-3d7c0d6d263b.png" width="25" height="25" alt="twitter icon">
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/9625317f-135b-4d08-bf8f-f242958c85cd.png" width="25" height="25" alt="phone">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- END SOCIAL BUTTONS -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I expanded your code snippet to full screen and inspected it with the developer tools window, and I noticed that this <td> element is taking up space on the right side of the screen, which seems to be what is causing your other elements to shift off-center:
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
I tried just deleting that element, and it seemed to do the trick. The element is nested inside this <tr> element along with your paragraph of text:
<tr>
<td align="justify" style="font-size:14px;line-height:24px;font-family:Helvetica, Arial, sans-serif;color:#000000;letter-spacing:1px;padding:0px 0px 0px 0px;" class="responsive">
Did you know that in 2017 Instagram saw the fastest user growth rate in its
history — instead of slowing down, it’s actually growing faster these days. Instagram is the platform to beat right now. People are there, the growth is there, the
engagement is happening, and the creative and advertising tools are available to all.
</td>
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
</tr>
Here is a screenshot of that element highlighted:
I'm doing a newsletter in HTML and GMAIL is always displaying a border on the following table :
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 20px 0 20px 0;margin:20px 0 20px 0;height:150px;">
<table border="0" cellpadding="0" cellspacing="0" width="60%">
<tr>
<td align="center" style="padding: 20px 0 20px 0; color: #000000; font-family:Helvetica,verdana,sans-serif;border-top:5px solid;border-bottom:5px solid;solid;border-color:#000000;">
<span style="font-size:24px;padding: 0 0 0 0;color:#000000;"><b>THE MILAN DESIGN WEEK CONTINUES IN BRERA !</b></span>
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#ffffff">
<td bgcolor="#ffffff" style="padding: 10px 20px 20px 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<img src="DCW_RAW_1.jpg" alt="DCW éditions lampes Gras at Raw Brera" width="560" height="382" style="display: block;" />
</td>
</tr>
</table>
</td>
</tr>
Could anyone explain me why ?
Here is a JSFiddle of the code
JSFIDDLE
Thanks a lot !
I am working on an e-mail template that includes 2 links to a website and an e-mail address. They are both of varying widths and have it setup so that they're both beside each other and centred down the middle.
Recently ran into a problem when testing with Outlook and saw that the boxes were not centred and rather pushed to the left and right.
Here are some screenshots of what is happening:
Browser / Other E-mail Clients:
Outlook / Word Templating Engine:
The Code:
<td style="padding-bottom:0px; padding-left:10px; padding-right:10px; padding-top:22px; " align="center">
<table class="contact_links_container" border="0" cellspacing="0" cellpadding="0" width="580" align="center" style="margin:auto; ">
<tr>
<td align="center">
<div class="templateEdit" id="contact_links">
<table class="contact_button_container" style="margin: auto;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<a href="http://www.domain.com">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" height="20" align="center" valign="middle">
<a href="http://www.domain.com/">
<img src="/images/icn_globe.png" border="0" alt="" width="18" height="18" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="http://www.domain.com/">www.domain.com</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
<table class="contact_button_container" style="margin: auto;" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" align="center" valign="middle">
<a href="mailto:newaccounts#domain.com">
<img src="images/icn_grey_mail.png" border="0" alt="" width="21" height="20" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="mailto:apisupport#domain.com">Email</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
Does anyone have any ideas on how I can format it so that it works appears in Outlook as it does in the 1st image?
Specify the width for div and td wherever needed. It should work, outlook mail client will set the element width to 100% with reference to body if not specified.
I have the following HTML:
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#C5C5C5">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628618/image01_et7dqm.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT ABOUT SOMETHING YET TO BE CONFIRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 2 Column Images - text left -->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td align="right">
<a href="#"><img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" border="0" style="border-radius: 0px; width: 20px; display: block;" class="deviceWidth" />
</td>
</tr>
</table>
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#E1E1E1">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628616/image1.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT YET TO BE CONFRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
which renders as follows
As you can see at the bottom I have a triangle which I'm trying to position so it overflows on to the next box, unfortunately I can not for the life of me get it to sit correctly, i.e the white space between the dark shade and lighter shade of gray to dis-appear can someone give me a hand please the end result is to look like this :
First of all it is recommended not to use tables for formatting page sections. In this case you can set the Parent of triangle as a relative positioned element with height of 0px and position triangle as absolute element. So:
<div class="deviceWidth" style="width:580px;position:relative;height:0;margin-right:auto;margin-left:auto;">
<img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" style="border:0;position:absolute;top:0;right:20px;border-radius: 0px; width: 20px;" class="deviceWidth">
</div>
also please note that :
remove the display:block from image
set border:0 inside styles not as a separate attribute
I have added margin-right:auto and margin-left:-auto to align div in center of screen