I have a table within a table and the table inside is not centering for some reason. I can't figure out why, maybe the VML is messing with it somehow? The h3 tag above the table seems to center just fine. I have the background of the table to be blue just so I can see it clearer. Here's my email template:
<body>
<div style="text-align: center; padding: -8px; font-family: brandon-grotesque-regular, Lato, sans-serif;">
<table style="width: 100%; text-align: center;" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr style="text-align: center;">
<td align="center" bgcolor="#ffffff" background="http://f52c38c7.ngrok.io/y6_warrior_challenge_email/images/bg_y6.png" valign="top" style="background-image: url('http://f52c38c7.ngrok.io/y6_warrior_challenge_email/images/bg_y6.png'); background-repeat: no-repeat; background-position: center; background-size: contain; background-color: #ffffff; text-align: center; align: center;" width="680" height="960">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 510pt; height:720pt;">
<v:fill type="frame" src="https://image.freepik.com/free-vector/elegant-white-texture-background_23-2148431731.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding: 48px;">
<tbody>
<tr>
<td align="center" style="text-align: center;">
<h3 style="color: #043d52; font-size: 32px; font-weight: bolder; padding: 32px 0 32px 0; margin: 0">
this is text
</h3>
<center>
<table align="center" style="background: blue; text-align: center;">
<tbody>
<tr>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 145px; width: 100%;" alt="Shirt image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 79px; width: 100%;" alt="Hat image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 139px;" alt="Water bottle image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 136px; width: 100%;" alt="Hoodie image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
</tr>
<tr>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</body>
This is what it looks like in Outlook 365:
I highlighted the background to be gray so you can see it clearer, but the blue table is definitely not centered. I even tried using the <center> tag but it's still not working.
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>
I'm using the image as a background in my HTML-email, to get the ability to allocate text and button over the top layer of the image and it is working fine for every email client beside the MS Outlook 2013 on Windows 7.
For some reason, once the user got the email and click on the button (or wherever image area) there is weird frame appears around the image and that frame looks like user can edit that image (rotate or resize), but he can't, it's just a frame.
I can't figure out how can I get rid of that frame. Another problem is the Litmus doesn't show any issue with the code so it's kina like impossible to fix without actual sending. Please help!
Using all header as one image isn't an option because the client requires the ability to change the text over himself.
Below the part of the code for the header only but here is the link on the code of the entire email https://pastebin.com/edYR2eVm and the Litmus project https://litmus.com/builder/da4ef27
<!-- HERO : BEGIN -->
<tr>
<!-- Bulletproof Background Images c/o https://backgrounds.cm -->
<td background="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYiUYrvVY_LbHtpJf-iiBrk_3BXOwqHyulAj0sDk3gJKOxAl6FkA" bgcolor="#222222" align="center" valign="top" style="text-align: center; background-position: center center !important; background-size: cover !important;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px; height:380px; background-position: center center !important;">
<v:fill type="tile" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYiUYrvVY_LbHtpJf-iiBrk_3BXOwqHyulAj0sDk3gJKOxAl6FkA" color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="500">
<tr>
<td align="center" valign="middle" width="500">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:500px; margin: auto;">
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
</tr>
<tr>
<td align="center" valign="middle">
<table>
<tr>
<td valign="top" style="text-align: center; padding: 60px 0 10px 20px;">
<h1 style="margin: 0; font-family: 'Montserrat', sans-serif; font-size: 30px; line-height: 36px; color: #ffffff; font-weight: bold;">WELCOME %%FIRST NAME%%</h1>
</td>
</tr>
<tr>
<td valign="top" style="text-align: center; padding: 10px 20px 15px 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #fff;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore.</p>
</td>
</tr>
<tr>
<td valign="top" align="center" style="text-align: center; padding: 15px 0px 60px 0px;">
<!-- Button : BEGIN -->
<center>
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="text-align: center;">
<tr>
<td style="border-radius: 50px; background: #26a4d3; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #26a4d3; border: 15px solid #26a4d3; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 50px; font-weight: bold;" class="button-a">
<span style="color:#ffffff;" class="button-link"> ACCESS ACCOUNT </span>
</a>
</td>
</tr>
</table>
</center>
<!-- Button : END -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<!-- HERO : END -->
I'm new to Dreamweaver and I have no idea how to code, but I managed to make an HTML newsletter. But the issue now is, whenever I send it via Gmail, my pictures are shown as alt_text.
The images are on the same folder as the newsletter.html file.
What am I doing wrong?
Here's the document and images for download if anyone needs it:
https://drive.google.com/file/d/0B6idya0YoPGnekc5V28tRGljWDQ/view
<!doctype html>
<html>
<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">
<title>EmailTemplate-Responsive</title>
<style type="text/css">
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !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;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
#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;
}
/* And center justify these ones. */
.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="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
<table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email Header : BEGIN -->
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: center"><img src="Headers.png" width="600" height="150" alt="" border="0"></td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
<tr> </tr>
<tr>
<td background="SJCAM-Logo.png" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">
<v:fill type="tile" src="assets/Responsive/Image_600x230.png" color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" style="text-align: center; padding: 40px; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #ffffff;"> </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="M20.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP<br>
4K#24fps<br>
2K#30fp<br>
1080P#60fps<br>
Sony IMX206 sensor <br>
NTK96660 Novatek CPU <br>
Gyro Anti-shake & WiFi </td>
</tr>
</table></td>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="SJ6LegendAir.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">14MP<br>
4K#24fps <br>
2K#30fp <br>
1080P#60fps <br>
Panasonic MN34112PA sensor <br>
SJCAM A9s CPU <br>
Gyro Anti-shake & WiFi<br></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="SJ6Legend.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP <br>
4K#24fps <br>
2K#30fp <br>
1080P#60fps <br>
Panasonic MN34120PA sensor<br>
NTK96660 Novatek CPU <br>
Gyro Anti-shake & WiFi</td>
</tr>
</table></td>
<td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="SJ7Star.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP <br>
4K#30fps <br>
2K#60/30fp <br>
1080P#120/60fps <br>
Sony IMX117 sensor<br>
Ambarella A12S75 CPU<br>
Gyro Anti-shake & WiFi</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="Battery.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">1000mAh high capacity substitutive Li-ion battery is the best choice for keeping your action camera away from powering off. For SJ6 Legend and S7 Star.<br>
<br></td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="DualBatteryCharger2.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">2-slot battery charger for SCJAM SJ6 Legend or SJ7 Star.<br>
<br>
<br>
<br>
<br>
<br></td>
</tr>
</table></td>
<td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 10px; text-align: center"><img src="EXTERNAL-MIC.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> External Microphone for SJ6 Legend, SJ7 Star and SJ360<br>
<br>
<br>
<br>
<br>
<br></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="RemoteWatch.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><font color="#111111"><strong>Smart Remote WristWatch</strong></font><br>
<br>
Smart Remote Wristwatch, features include: Power, Video-Photo, WiFi on/off, Burst mode, Waterproof up to 3 meters.<br>
<br>
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr> </tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="Selfiestick.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></td>
</tr>
</table></td>
<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><font color="#111111"><strong><br>
Remote Controller Selfie Stick</strong></font> <br>
<br>
Smart Remote Controller features include: Power, Video-Photo, WiFi on/off, Burst mode, Waterproof up to 3 meters.<br>
Folded Length (mm): 280 ; Extended Length (mm):900<br>
<br>
<table><br>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table align="center" width="600" class="email-container">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;"><webversion style="color:#cccccc; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion>
<br>
<br>
SIA AVEX<br>
Katlakalna iela 9,Rīga<br>
3. Stāvs<br>
<br>
<br><unsubscribe style="color:#888888; text-decoration:underline;">unsubscribe</unsubscribe></td>
</tr>
</table>
</center></td>
</tr>
</table>
</body>
</html>
I have this simple table newsletter design and I cannot identify what causes the table to be wider than I set it to be.
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" max-width="600" style="height:auto;" >
<tr>
<td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600" height="440" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat;" valign="middle"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table border="1" cellpadding="0" cellspacing="30" max-width="600">
<tr>
<td align="center"><br>
<img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88" height="47" align="center" link="" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;">
WEBSITE</anpa>
<anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
FORWARD</anpa>
<anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
SUBSCRIBE</anpa>
<anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;">
UNSUBSCRIBE<br>
</anpa></font>
</td>
</tr>
<tr>
<td width="600" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org">
Baltic Development Forum</anpa></font></td>
</tr>
<tr>
<td align="center">
<font style="font-weight:100;font-family:Myriad Pro; font-size: 12px; color: #ffffff !important;">
LATEST BDF NEWS ESPECIALLY FOR YOU
</font></td>
</tr>
<tr>
<td align="center">
<!-- <td align="center" style="background-image:url(http://img.anpdm.com/BalticDevelopmentForum/buttonEmpty.png); background-repeat: no-repeat; background-size: 184px 38px; background-position: center; padding: 9px;" alt="">
<anpa href="http://www.bdforum.org" style="font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; vertical-align: middle;">
WEBSITE</anpa>
</td>-->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.bdforum.org"
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table>
If you could help me I would really appreciate it. I am kind of a beginner. Especially with writing html for emails as its super annoying with different supports
because you have to put max-width="600" inside the style attribute since max-width not a valid attribute for table, fix your problem like this style="height:auto;max-width:600px"
UPDATE
To handle the extra pixels on right and bottom add this style="padding: 0;width: 100%;" to the first td
Put max-width attribute inside style tag
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" style="height:auto;max-width:600px" >
For border issue, you can update table tag like
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" style="height:auto;max-width:600px;border-bottom: none!important;border-right: none !important;" >
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" style="height:auto;max-width:600px;border-bottom: none!important;border-right: none !important;" >
<tr>
<td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600" height="440" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat;" valign="middle"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table border="1" cellpadding="0" cellspacing="30" max-width="600">
<tr>
<td align="center"><br>
<img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88" height="47" align="center" link="" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;">
WEBSITE</anpa>
<anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
FORWARD</anpa>
<anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
SUBSCRIBE</anpa>
<anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;">
UNSUBSCRIBE<br>
</anpa></font>
</td>
</tr>
<tr>
<td width="600" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org">
Baltic Development Forum</anpa></font></td>
</tr>
<tr>
<td align="center">
<font style="font-weight:100;font-family:Myriad Pro; font-size: 12px; color: #ffffff !important;">
LATEST BDF NEWS ESPECIALLY FOR YOU
</font></td>
</tr>
<tr>
<td align="center">
<!-- <td align="center" style="background-image:url(http://img.anpdm.com/BalticDevelopmentForum/buttonEmpty.png); background-repeat: no-repeat; background-size: 184px 38px; background-position: center; padding: 9px;" alt="">
<anpa href="http://www.bdforum.org" style="font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; vertical-align: middle;">
WEBSITE</anpa>
</td>-->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.bdforum.org"
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
Hope it helps.
Does anyone have an idea what's causing this HTML email to display fine in all clients and browsers except for Outlook? The title gets cut off by the logo on top, and the social media icons are cut off beneath "Follow Us."
I've included the code specific to those rows:
<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; text-align: left;"><!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-->
<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<tr>
<td height="36" style="font-size: 0; line-height: 0; min-height: 36px !important;"> </td>
</tr>
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tr>
<td style="text-align: center" class=""><img alt="logo" aria-hidden="true" border="0" src="logo.jpg" style="display: block; background: rgb(255, 255, 255); border-width: 0px; border-style: solid; width: 181px; min-height: 45px; line-height: 1.4em;" height="45" width="181"></td>
</tr>
</table>
<tr>
<td height="56" style="font-size: 0; line-height: 0; min-height: 56px !important;"> </td>
</tr>
<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" width="90%">
<tr>
<td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;"> </td>
</tr>
<tr>
<td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; overflow: hidden;">
<h2 style="font-size: 15px; text-transform: uppercase; text-align: center;">Follow us</h2><br>
</td>
</tr>
<tr>
<td height="27" style="font-size: 0; line-height: 0; min-height: 27px;"> </td>
</tr>
<tr><td align="center" class="stack-column-center" style="display: block; font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; min-height: 60px;">
<img alt="LinkedIn social icon" aria-hidden="true" border="0" src="link" style="line-height: 1.4em; min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"> <img alt="YouTube social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"> <img alt="Facebook social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"> <a href="link">
<img alt="Twitter social icon" aria-hidden="true" border="0" src="linhk" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a></td>
</tr>
<tr>
<td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;"> </td>
</tr>
</table>
There is quiet a number of issues with your code. You had tr's starting without a table, div started but not closed and tables without a td or tr to sit under. I have made change changes to your html to fix the above, let me know if it works now.
<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; text-align: left;"><!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-->
<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tr>
<td height="36" style="font-size: 0; line-height: 0; min-height: 36px !important;"> </td>
</tr>
<tr><td>
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tr>
<td style="text-align: center" class=""><img alt="BalanceWorks" aria-hidden="true" border="0" src="http://www2.eniweb.com/l/50342/2017-03-31/8dx33b/50342/153983/BalanceWorks_Transparent.jpg" style="display: block; background: rgb(255, 255, 255); border-width: 0px; border-style: solid; width: 181px; min-height: 45px; line-height: 1.4em;" height="45" width="181"></td>
</tr>
</table>
</td></tr>
<tr>
<td height="56" style="font-size: 0; line-height: 0; min-height: 56px !important;"> </td>
</tr>
<tr><td>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" aria-hidden="true" role="presentation">
<tr>
<td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;"> </td>
</tr>
<tr>
<td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; overflow: hidden;">
<h2 style="font-size: 15px; text-transform: uppercase; text-align: center;">Follow us</h2><br>
</td>
</tr>
<tr>
<td height="27" style="font-size: 0; line-height: 0; min-height: 27px;"> </td>
</tr>
<tr><td align="center" class="stack-column-center" style="display: block; font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; min-height: 60px;">
<img alt="LinkedIn social icon" aria-hidden="true" border="0" src="link/l/50342/2017-03-31/8dv136/50342/153855/linkedin.png" style="line-height: 1.4em; min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"> <img alt="YouTube social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"> <img alt="Facebook social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"> <a href="link">
<img alt="Twitter social icon" aria-hidden="true" border="0" src="linhk" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a></td>
</tr>
<tr>
<td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;"> </td>
</tr>
</table>
</td></tr></table></div>
</body>
Cheers