I'm trying to align this text and button but I can't manage to do it. I want them to be on the same row no matter the length of the text.
If you need the CSS styling please let me know.
<div style="float: left; width: 100%;" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td width="640" align="center" style="width: 640px; min-width: 640px;" class="wrapto100pc">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto100pc">
<tbody>
<tr>
<td align="center" style="">
<table bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="min-width: 100%;" width="100%" role="presentation">
<tbody>
<tr>
<td align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-size: 0; direction: ltr;">
<!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="100%" dir="ltr"><tr><td valign="middle"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> DONE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> Lorem ipsum, lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="middle" style="font-size:0;"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> STOPE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size: 0px;" class="nomob"> </td>
</tr>
</tbody>
</table>
</div>
I think for your requirement we would need to make some changes in the structure of your table. we need to keep button and text in the same and with different s.
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td width="640" align="center" style="width: 640px; min-width: 640px;" class="wrapto100pc">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto100pc">
<tbody>
<tr>
<td align="center" style="">
<table bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="min-width: 100%;" width="100%" role="presentation">
<tbody>
<tr>
<td align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-size: 0; direction: ltr;">
<!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="100%" dir="ltr"><tr><td valign="middle"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr width="320" style="max-width:320px">
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="320" align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr width="320">
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> DONE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td width="160" align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> Lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum </td>
<td width="160" align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="middle" style="font-size:0;"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> STOPE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size: 0px;" class="nomob"> </td>
</tr>
</tbody>
Try above snippet. It might work for you. I have made few changes in structure of table.
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 having an issue with the outlook application.
One thin line shows above and below the img tag. I have highlighted
the line in the screenshot.
I have attached the screenshot in which the thin line is highlighted.
Please let me know the suggested fix.
Thank you in advance.
#media only screen and (max-width: 639px) {
.st-title-wrapper {
padding-left: 50px !important;
padding-right: 50px !important;
}
.st-title {
font-size: 24px !important;
line-height: 22px !important;
}
.st-desc {
font-size: 16px !important;
line-height: 18px !important;
}
.footer-links {
padding-left: 20px !important;
}
.footer-link-single {
padding: 8px 5px !important;
}
.footer-link-single a {
font-size: 14px !important;
}
.footer-link-top {
height: 30px !important;
}
.footer-link-bottom {
height: 30px !important;
}
.footer-social {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.footer-logo {
width: 125px !important;
}
.footer-logo img {
width: 125px !important;
}
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Email template</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#300;400;700&display=swap" rel="stylesheet" />
<meta name="x-apple-disable-message-reformatting" />
<!--[if gt mso 15]>
<style type="text/css" media="all">
/* Outlook 2016 Height Fix */
table,
tr,
td {
border-collapse: collapse;
}
tr {
font-size: 0px;
line-height: 0px;
border-collapse: collapse;
}
</style>
<![endif]-->
</head>
<body style="margin: 0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="max-width: 100%; width: 840px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<tbody>
<tr>
<td align="center" style="background-color: #000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tbody>
<tr>
<td></td>
<td style="width: 360px; text-align: center" class="st-title-wrapper">
<font style="
color: #e4002b;
font-family: 'Oswald', Arial, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 28px;
" class="st-title">Lorem Ipsum is simply dummy text of the
</font>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#e6e6e6">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tr>
<td>
<img src="https://rahulshahui.github.io/pwa/images/shape-top.png" width="100%" style="display: block" />
</td>
</tr>
<tr>
<td align="center" style="padding: 13px 20px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tbody>
<tr>
<td></td>
<td width="550" style="text-align: center">
<font style="
color: #1a1a1a;
text-align: center;
font-family: Arial, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 20px;
" class="st-desc">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia.
</font>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<img src="https://rahulshahui.github.io/pwa/images/shape-bottom.png" width="100%" style="display: block" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="
border-collapse: collapse;
border-spacing: 0px;
">
<tbody>
<tr>
<td align="" class="footer-links" style="padding-left: 80px">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="240" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="" valign="middle" style="padding: 8px 0" class="footer-link-single">
<a href="https://www.google.com/" style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
">Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
</table>
</td>
<td width="210" valign="top">
<table
border="0"
cellpadding="0"
cellspacing="0"
>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
colspan="3"
height="60"
class="footer-link-bottom"
></td>
</tr>
<tr>
<td
align="center"
style="
padding-left: 42px;
padding-right: 42px;
"
>
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
height="1"
style="background-color: #fff"
></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" colspan="3">
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
align="right"
class="footer-social"
style="
padding-top: 62px;
padding-bottom: 62px;
"
>
<table
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tbody>
<tr>
<td
align="center"
valign="middle"
style="
padding-left: 8px;
padding-right: 8px;
"
>
<a
href="https://www.google.com/"
>
<img
src="https://rahulshahui.github.io/pwa/images/FB-icon.png"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
[Below is the code link][2]
[2]: https://codepen.io/rahulFront/pen/oNpPvgZ
This looks like a border.
Try adding border-width:0; to the images, e.g.:
<img src="https://rahulshahui.github.io/pwa/images/shape-bottom.png" width="100%" style="display: block;border-width:0;" />
I'm formatting a table on 2 rows with 3 images but the 2nd image in each row keeps dipping down and hugging to the wrong direction. I'm not sure what's causing it.
This is for an email and I'm just trying to pick apart some of the template to better fit my needs, thus all that inline CSS.. The responsiveColumn class is just for a media query just an fyi.
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div></td></tr>
</tbody></table></td>
I put it in jsfiddle so you can see it more clearly. You'll see how the 2nd image in each row just dips down and moves to the left opposed to keeping everything evenly on one line
https://jsfiddle.net/9f5c2zh6/1/
Remove the padding-top
<td style="padding-top: 20px;padding-right: 5px;padding-bottom: 20px;padding-left: 5px;background-color: #ffffff;color: #000000;" valign="top" bgcolor="#ffffff">
This is why we avoid inline styles because it's difficult to debug, However after some fiddling around, i found some problems
First: certain p elements have the following styles, And some others don't
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
Second: certain td elements have the following styles, And some others don't
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
The fix is to add the missing styles to where they belongs so everything is aligned nicely together
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end 3 column section -->
<!-- 3 column section -->
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image on 2nd row -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
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>
Can anyone tell me why the rows in this layout are breaking the width? I know it's a fixed-width static layout, and it's an in-line mess, but this is what we need to use until I can develop a fluid/responsive layout.
Self-taught coder, so there's probably a lot I'm doing wrong here. The layout should be a single column, with one row at the bottom that needs 3 table cells as displayed in the snippet.
<!doctype html>
<html>
<head><title>JFG eNewsletter</title></head>
<body>
<table width="100%" style="background-color: #E4E0D6; padding: 0px;" border="0" cellpadding="0">
<tr>
<td style="background-color: #E4E0D6; padding: 20px 0px 0px 0px;">
<table align="center" style="background-color: #FFFFFF; width: 600px; max-width: 600px; padding: 0px;" cellspacing="0" cellpadding="0">
<tr style="background-color: #72113D; width: 600px;">
<td align="left" width="60" style="background-color: #72113D; padding: 20px 20px 20px 20px; width: 60px; display: inline-block;" colspan="0">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/J-white.png" align="center" width="60" alt="JFG Logo" border="0" />
</td>
<td align="left" width="450" style="background-color: #72113D; font-family: 'open sans', san-serif; color: #FFFFFF; font-size: 24px; font-weight: bold; padding: 0px 10px 0px 10px; width: 450px; display: inline-block;" colspan="5">
Make the Most of Your Business<br />
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Banking">BANKING</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Wealth">WEALTH</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Insurance">INSURANCE</a>
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="width: 600px; max-width: 600px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/email_heo_ecoforum.png" alt="" width="600" height="200" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 20px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr>
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502935/2016_eNewsletters/WeeklyInvestmentCommentary.png" width="600" height="87" alt="" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 138px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/bizmobilebanking.png" width="600" height="138" alt="Marketing Banner Ad" border="0" />
</td>
</tr>
<tr align="center" style="background-color: #FFFFFF;">
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/articles-email.png" alt="Articles Logo" width="200" height="144" border="0" /><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/calculators-email.png" alt="Calculators Logo" width="200" height="144" border="0" /><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/events-email.png" alt="Events Logo" width="200" height="144" border="0" />
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr align="center" style="background-color: #72113D;">
<td align="center" width="220" style="background-color: #72113D; width: 220px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="220">
<tr>
<td align="center" style="padding-bottom: 5px;"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JB_HZ.png" width="100" alt="Johnson Bank Logo" border="0" /></td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="FB Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Twitter_001.jpg" width="32" alt="Twitter Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/YouTube_001.jpg" width="32" alt="YouTube Logo" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="170" style="background-color: #72113D; width: 170px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="170">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JINS_HZ.png" width="100" alt="Johnson Insurance Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="Johnson Insurance" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="150" style="background-color: #72113D; width: 150px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="150">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/CGA_HZ.png" width="129" alt="CGA Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; display: inline-block;">
<td align="left" valign="top" width="40" style="background-color: #82204C; padding: 20px 0px 0px 20px; width: 40px; display: inline-block;" colspan="0">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/EHL.png" align="center" width="31" height="32" alt="Equal Housing Lender" border="0" />
</td>
<td align="left" width="500" style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; padding: 10px 10px 10px 10px; width: 500px; display: inline-block;" colspan="5">
<strong>Johnson Bank, Member FDIC | Equal Housing Lender</strong><br />Insurance products are sold through Johnson Insurance Services, LLC and non‐depository investment products offered and sold through Johnson Bank and Cleary Gull Advisors, an SEC registered investment adviser, are not insured by the FDIC, not a deposit or other obligation of, or guaranteed by, the bank. Non‐depository investment products are subject to investment risks, including possible loss of the principal amount invested.<br /><br />Johnson Bank, Johnson Insurance and Cleary Gull Advisors are affiliates and subsidiaries of Johnson Financial Group.
</td>
</tr>
<tr style="background-color: #E4E0D6; font-family: 'open sans', san-serif; font-size: 7pt; color: #454646;">
<td align="left" style="padding: 10px 0px 10px 0px; display: inline-block;" colspan="5">
Unsubscribe or update your email address | 555 Main Street | Racine, WI 53403
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
If you're talking about the line just above your footer being slightly narrower than the rest, all you need to do is ensure a constant width for the rows of 600px by adding width: 600px inline to the relevant <tr> element:
<!doctype html>
<html>
<head>
<title>JFG eNewsletter</title>
</head>
<body>
<table width="100%" style="background-color: #E4E0D6; padding: 0px;" border="0" cellpadding="0">
<tr>
<td style="background-color: #E4E0D6; padding: 20px 0px 0px 0px;">
<table align="center" style="background-color: #FFFFFF; width: 600px; max-width: 600px; padding: 0px;" cellspacing="0" cellpadding="0">
<tr style="background-color: #72113D; width: 600px;">
<td align="left" width="60" style="background-color: #72113D; padding: 20px 20px 20px 20px; width: 60px; display: inline-block;" colspan="0">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/J-white.png" align="center" width="60" alt="JFG Logo" border="0" />
</td>
<td align="left" width="450" style="background-color: #72113D; font-family: 'open sans', san-serif; color: #FFFFFF; font-size: 24px; font-weight: bold; padding: 0px 10px 0px 10px; width: 450px; display: inline-block;" colspan="5">
Make the Most of Your Business<br />
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Banking">BANKING</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Wealth">WEALTH</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Insurance">INSURANCE</a>
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="width: 600px; max-width: 600px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/email_heo_ecoforum.png" alt="" width="600" height="200" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 20px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr>
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502935/2016_eNewsletters/WeeklyInvestmentCommentary.png" width="600" height="87" alt="" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 138px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/bizmobilebanking.png" width="600" height="138" alt="Marketing Banner Ad" border="0" />
</td>
</tr>
<tr align="center" style="background-color: #FFFFFF;">
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/articles-email.png" alt="Articles Logo" width="200" height="144" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/calculators-email.png" alt="Calculators Logo" width="200" height="144" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/events-email.png" alt="Events Logo" width="200" height="144" border="0" />
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr align="center" style="background-color: #72113D;">
<td align="center" width="220" style="background-color: #72113D; width: 220px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="220">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JB_HZ.png" width="100" alt="Johnson Bank Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="FB Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Twitter_001.jpg" width="32" alt="Twitter Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/YouTube_001.jpg" width="32" alt="YouTube Logo" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="170" style="background-color: #72113D; width: 170px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="170">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JINS_HZ.png" width="100" alt="Johnson Insurance Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="Johnson Insurance" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="150" style="background-color: #72113D; width: 150px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="150">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/CGA_HZ.png" width="129" alt="CGA Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; display: inline-block; width: 600px;">
<td align="left" valign="top" width="40" style="background-color: #82204C; padding: 20px 0px 0px 20px; width: 40px; display: inline-block;" colspan="0">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/EHL.png" align="center" width="31" height="32" alt="Equal Housing Lender" border="0" />
</td>
<td align="left" width="500" style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; padding: 10px 10px 10px 10px; width: 500px; display: inline-block;" colspan="5">
<strong>Johnson Bank, Member FDIC | Equal Housing Lender</strong><br />Insurance products are sold through Johnson Insurance Services, LLC and non‐depository investment products offered and sold through Johnson Bank and Cleary
Gull Advisors, an SEC registered investment adviser, are not insured by the FDIC, not a deposit or other obligation of, or guaranteed by, the bank. Non‐depository investment products are subject to investment risks, including possible
loss of the principal amount invested.<br /><br />Johnson Bank, Johnson Insurance and Cleary Gull Advisors are affiliates and subsidiaries of Johnson Financial Group.
</td>
</tr>
<tr style="background-color: #E4E0D6; font-family: 'open sans', san-serif; font-size: 7pt; color: #454646;">
<td align="left" style="padding: 10px 0px 10px 0px; display: inline-block;" colspan="5">
Unsubscribe or update your email address | 555 Main Street | Racine,
WI 53403
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Hope this helps! :)