I have been asked to create a HTML email signature, all looks fine in Google Chrome. But when viewed in Outlook, everything moves around.
Would anyone be able to shine some light on where I might be going wrong?
Thanks.
<table aria-hidden="false" cellspacing="0px" cellpadding="0px" border="0px" width="350px" style="margin: 0px; max-width: 100%;">
<tr>
<td rowspan="2" align="left" style="vertical-align:center">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Tom_Avatar.png?v=1602754752" width="200px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
<td colspan="2" align="center" style="vertical-align:bottom">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Lixi_Logo_6fa83943-d431-41b8-acd1-4e1180dc1aa1.png?v=1602754752" width="125px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="[https://www.facebook.com/](https://www.facebook.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Face.png?v=1602680973" width="50px" style="padding-left: 15px;" />
</a>
</td>
<td align="center">
<a href="[https://www.instagram.com/](https://www.instagram.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/InstaG.png?v=1602680973" width="50px" style="padding-right: 15px;" />
</a>
</td>
</tr>
<td valign="top">
<p style="font-size: 14px; font-family: Helvetica, sans-serif; color: #464646; margin: 0px; padding-top: 30px; padding-left: 30px;">
<strong>This Guy</strong><br />
<strong>Job title</strong><br /><br />
<strong>e: </strong>thisguy#email.com<br />
<strong>w: </strong>www.bbc.com<br />
</p>
</td>
</table>
The problem is the incomplete structure of the HTML table in your code. To make your table complete, you need to wrap a tr around your last td to create a third row and apply colspan="3"to that last td to make it span the whole row.
Some browsers probably tolerate the missing elements, trying to fix the given code automatically, but others won't, which is what you experienced.
<table aria-hidden="false" cellspacing="0px" cellpadding="0px" border="0px" width="350px" style="margin: 0px; max-width: 100%;">
<tr>
<td rowspan="2" align="left" style="vertical-align:center">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Tom_Avatar.png?v=1602754752" width="200px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
<td colspan="2" align="center" style="vertical-align:bottom">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Lixi_Logo_6fa83943-d431-41b8-acd1-4e1180dc1aa1.png?v=1602754752" width="125px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="[https://www.facebook.com/](https://www.facebook.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Face.png?v=1602680973" width="50px" style="padding-left: 15px;" />
</a>
</td>
<td align="center">
<a href="[https://www.instagram.com/](https://www.instagram.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/InstaG.png?v=1602680973" width="50px" style="padding-right: 15px;" />
</a>
</td>
</tr>
<tr>
<td valign="top" colspan="3">
<p style="font-size: 14px; font-family: Helvetica, sans-serif; color: #464646; margin: 0px; padding-top: 30px; padding-left: 30px;">
<strong>This Guy</strong><br />
<strong>Job title</strong><br /><br />
<strong>e: </strong>thisguy#email.com<br />
<strong>w: </strong>www.bbc.com<br />
</p>
</td>
</tr>
</table>
Your document was not valid
remove deprecated attributes and add the correct CSS in the style tags
last cell was not in a row and was too narrow (colspan)
missing ALT tags on images (not super important)
hyperlinks were not correct (BBCode or markdown)
No need to make all lines "strong" in a set of lines.
<!doctype html>
<html lang="en">
<head>
<title>Title></title>
</head>
<body>
<table aria-hidden="false" style="width:350px; padding: 0; border:0; margin: 0px; max-width: 100%;">
<tr>
<td rowspan="2" style="text-align:left; vertical-align:center">
<a href="https://www.bbc.com/">
<img alt="avatar" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Tom_Avatar.png?v=1602754752" style="width:200px;padding-top: 0px; margin-left: 0px;" />
</a>
</td>
<td colspan="2" style="text-align:center; vertical-align:bottom">
<a href="https://www.bbc.com/">
<img alt="logo" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Lixi_Logo_6fa83943-d431-41b8-acd1-4e1180dc1aa1.png?v=1602754752" style="width:125px; padding-top: 0px; margin-left: 0px;" />
</a>
</td>
</tr>
<tr>
<td style="text-align:center">
<a href="https://www.facebook.com/">
<img alt="facebook" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Face.png?v=1602680973" style="width:50px;padding-left: 15px;" />
</a>
</td>
<td style="text-align:center">
<a href="https://www.instagram.com/">
<img alt="instagram" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/InstaG.png?v=1602680973" style="width:50px;padding-right: 15px;" />
</a>
</td>
</tr>
<tr>
<td colspan="3" style="vertical-align:top">
<p style="font-size: 14px; font-family: Helvetica, sans-serif; color: #464646; margin: 0px; padding-top: 30px; padding-left: 30px;">
<strong>This Guy<br />
Job title<br /><br />
e: </strong>thisguy#email.com<br />
<strong>w: </strong>www.bbc.com<br />
</p>
</td>
</tr>
</table>
</body>
</html>
Related
I am in the process of creating an email signature and came across an issue where for some reason when sending an email from Outlook to Gmail when you look on the iPhone mobile Gmail app the signatures stretch vertically adding a ton of space between elements? I will show an image below for reference.
When viewing the signature on desktop everything looks fine and even when viewing it via Outlook or Apple mail on Mobile it looks fine, only for Gmail on mobile? I was just wondering why this might be and how could I go about fixing it? Thank you! :)
Here is the signature code:
<body><div width="500" height="250" style="max-width: 500px; max-height: 250px; padding: 0; margin: 0; box-sizing: border-box;">
<!--SIGNATURE-->
<table border="0" cellspacing="0" cellpadding="0">
<!-- SECTION 1 PHOTOS DELETE WHEN FINISHED -->
<tbody><tr><td style="text-align: center;">
<table border="0" cellspacing="0" cellpadding="0" width="120" height="250" style="max-width: 120px; max-height: 250px;">
<tbody><tr>
<td>
<img src="https://www.azlendingexperts.com/images/bio_richard.jpg" alt="Headshot" id="imgchangeroutput" height="180" width="120" style="height: 180px; width: 120px; padding-bottom: 0;">
</td>
</tr>
<tr>
<td style="padding: 10px;"></td>
</tr>
<tr>
<td>
<a href="https://az-lending-experts-apply-now.secure-clix.com/" target="_blank">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/now.png" alt="Apply Now Button" height="30" style="height: 30px;">
</a>
</td>
</tr>
<tr>
<td>
<a href="https://issuu.com/azbigmedia/docs/raz_2021/432">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/ranking.png" alt="1 Mortage Broker Ranking Arizona Logo" width="120" style="width: 120px;">
</a>
</td>
</tr>
</tbody></table>
</td>
<!---------------------------------------------------------------------------------------------------->
<!-- SECTION 2 Information DELETE WHEN FINISHED -->
<!---------------------------------------------------------------------------------------------------->
<td><table border="0" cellspacing="0" cellpadding="0" width="350">
<!-- Main Logo -->
<tbody><tr>
<td>
<a href="https://www.azlendingexperts.com/" target="_blank">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/azlelogo.png" alt="AZ Lending Experts LCC logo" height="50">
</a>
</td>
</tr>
<tr>
<td style="padding: 10px;"></td>
</tr>
<tr>
<!-- INFO 1 NAME & NMLS -->
<td>
<div style="font-family: Arial, sans-serif; font-weight: bold; font-size: 18px;" id="text-box">Richard Simon</div>
<div style="font-family: Arial, sans-serif; color: #767171; font-size: 14px; font-weight: bold;"><span id="titleoutput">Owner</span> NMLS #<span id="nmlsoutput">155480</span></div>
</td>
</tr>
<tr>
<td style="padding: 10px;"></td>
</tr>
<!-- INFO 2 Mobile,Office,Email -->
<tr>
<td>
<div id="Mobile">
<span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Mobile: </span>480.239.3875
</div>
<div id="Office"><span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Office: </span><span style="">480.649.3825</span></div>
<div id="email"><div><span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Email: </span><span><a id="emailoutput" href="mailto:rsimon#azlendingexperts.com" style="font-family: Arial, sans-serif;color:#767171; font-size: 14px;">rsimon#azlendingexperts.com</a></span></div>
</div>
</td>
</tr>
<tr>
<td style="height: 20px;"></td>
</tr>
<tr>
<td>
4500 S Lakeshore Dr. Suite 595, Tempe, AZ 85282
</td>
</tr>
<tr>
<td>
www.azlendingexperts.com
</td>
</tr>
<tr>
<td>
<!-- <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/space.png" width="5" height="0" style="width: 5px; height: 0px;" /> -->
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Facebook.png" alt="facebook logo" height="30">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Instagram.png" alt="instagram logo" height="30">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Youtube.png" alt="youtube logo" height="30">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Linkedin.png" alt="linkedin logo" height="30">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Twitter.png" alt="twitter logo" height="30">
<img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Google.png" alt="Google Reviews" height="45">
</td>
</tr>
</tbody></table></td>
</tr></tbody></table>
</div>
</body>
I have once again solved my own question. I did some troubleshooting cross-referencing some existing working signatures and found that when using the div element margin was added once Gmail compiled it from outlook office 365. The solution was to use the span element for everything as it is inline it can't allow for margin on Top or Bottom there for solving the issue.
I will leave the code of the working version meant to be installed onto Outlook Office 365 just saying when you look at it on the browser it looks like there are still spacing issues but those are there on purpose so that once installed onto office 365 Outlook it will be perfect specifications as they compile sizing differently then the browser would.
<body>
<div width="500" height="250" style="max-width: 500px; max-height: 250px">
<!--SIGNATURE-->
<table border="0" cellspacing="0" cellpadding="0">
<!-- SECTION 1 PHOTOS DELETE WHEN FINISHED -->
<tbody>
<tr >
<td valign="top"style="max-height: 250px;text-align: center; padding-right: 10px;">
<table
border="0"
cellspacing="0"
cellpadding="0"
width="120"
height="250"
style="max-width: 120px; max-height: 250px"
>
<tbody>
<td cellpadding="0" style="text-align: center; padding-top: 10px; padding-bottom: 6px; width: 120px; height: 160px;">
<img
src="https://www.azlendingexperts.com/images/bio_richard.jpg"
alt="Headshot"
id="imgchangeroutput"
height="160"
style="height: 160px; max-width: 120px"
/>
</td>
</tr>
<tr style="padding-bottom: 6px; text-align: center;">
<td height="26">
<a
href="https://az-lending-experts-apply-now.secure-clix.com/"
target="_blank"
>
<img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/now.png"
alt="Apply Now Button"
height="26"
style="height: 26px;"
/>
</a>
</td>
</tr>
<tr style="padding-bottom: 12px; text-align: center; ">
<td>
<a href="https://issuu.com/azbigmedia/docs/raz_2021/432">
<img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/ranker.png"
alt="1 Mortage Broker Ranking Arizona Logo"
width="110"
style="width: 110px"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
<!---------------------------------------------------------------------------------------------------->
<!-- SECTION 2 Information DELETE WHEN FINISHED -->
<!---------------------------------------------------------------------------------------------------->
<td style="max-width: 350px; max-height: 250px">
<table
border="0"
cellspacing="0"
cellpadding="0"
width="350"
height="250"
style="max-width: 350px; max-height: 250px"
>
<tbody>
<tr>
<td
valign="top"
style="
font-size: 9pt;
font-family: Arial, sans-serif;
line-height: 11pt;
"
>
<!-- Main Logo -->
<a href="https://www.azlendingexperts.com/" target="_blank">
<img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/azlelogo.png"
alt="AZ Lending Experts LCC logo"
height="50"
width="270"
style="height: 50px; width: 270px;"
/><br>
</a>
<!-- INFO 1 NAME & NMLS -->
<br /><span
style="
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 18px;
"
id="text-box"
>
Richard Simon </span
><br />
<!-- INFO 2 Mobile,Office,Email -->
<span
style="
font-family: Arial, sans-serif;
color: #767171;
font-size: 14px;
font-weight: bold;
"
>
<span>
<span id="titleoutput">Owner</span> NMLS
#<span id="nmlsoutput">155480</span> </span
></span>
<br /><br>
<span id="Mobile">
<span
style="
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 14px;
"
>Mobile: </span
><a
href="tel:4802393875"
target="_blank"
id="phone1output"
style="
font-family: Arial, sans-serif;
text-decoration: none;
color: #767171;
font-size: 14px;
"
>480.239.3875</a
> </span
><br />
<span id="Office">
<span
style="
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 14px;
"
>Office: </span
><span style=""
><a
href="tel:4806493825"
target="_blank"
id="phone2output"
style="
font-family: Arial, sans-serif;
text-decoration: none;
color: #767171;
font-size: 14px;
"
>480.649.3825</a
></span
>
</span>
<br />
<span id="email">
<span>
<span
style="
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 14px;
"
>Email: </span
><span
><a
id="emailoutput"
href="mailto:rsimon#azlendingexperts.com"
style="
font-family: Arial, sans-serif;
color: #767171;
font-size: 14px;
"
>rsimon#azlendingexperts.com</a
></span
>
</span>
</span>
<br>
<br />
<span>
<span style="">
<a
href="https://www.google.com/maps/place/4500+S+Lakeshore+Dr+%23595,+Tempe,+AZ+85282/data=!4m2!3m1!1s0x872b062196b8962b:0x93f0ee8ff2a4f8e1?sa=X&ved=2ahUKEwi7gLH_15H0AhX2HzQIHTkDDpcQ8gF6BAgSEAE"
target="_blank"
style="
font-family: Arial, sans-serif;
text-decoration: none;
color: #767171;
font-size: 12px; ;
"
>4500 S Lakeshore Dr. Suite 595, Tempe, AZ 85282</a
>
</span>
<br />
<span><a
href="https://www.azlendingexperts.com/"
target="_blank"
style="font-family: Arial, sans-serif; font-size: 14px"
>www.azlendingexperts.com</a
></span>
</span>
<br>
<span>
<a
href="https://www.facebook.com/RichardSimonMortgage"
id="facebookoutput"
target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Facebook.png"
alt="facebook logo"
height="25"
width="25"
style="height: 25px; width: 25px;"
/></a>
<a
href="https://www.instagram.com/richardsimonmortgage/"
id="instagramoutput"
target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Instagram.png"
alt="instagram logo"
height="25"
width="25"
style="height: 25px; width: 25px;"
/></a>
<a
href="https://www.youtube.com/channel/UCfFk2G78rqkCC5j9h_m3PvQ"
id="youtubeoutput"
target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Youtube.png"
alt="youtube logo"
height="25"
width="25"
style="height: 25px; width: 25px;"
/></a>
<a
href="https://www.linkedin.com/in/richardsimonmortgage"
id="linkedinoutput"
target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Linkedin.png"
alt="linkedin logo"
height="25"
width="25"
style="height: 25px; width: 25px;"
/></a>
<a
href="https://twitter.com/azlendingexpert"
id="twitteroutput"
target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Twitter.png"
alt="twitter logo"
height="25"
width="25"
style="height: 25px; width: 25px;"/></a
>
<a href="" target="_blank"
><img
src="https://raw.githubusercontent.com/onthegocode/renovation/main/Google.png"
alt="Google Reviews"
height="35"
width="90"
style="height: 35px; width: 90px;"
/></a>
</span>
</td>
</tr>
<tr>
<td>
<!-- <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/space.png" width="5" height="0" style="width: 5px; height: 0px;" /> -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
I hope this helps someone who is having the same issue because I have looked for months and have not found a single answer until I found it myself. Not even StackOverflow has had a similar problem it seems as no one could help or pose a similar question before.
Your answer helped! I did go through my code and added a lot of your extra code bit by bit, and it took me a while to land the snippet that solved my problem. I then cut the non-changing snippets from my code without the issue coming back.
I'll explain my process just in case it can help someone else down the road.
My signature varies from this one in that it is made up of image slices only, with the slices with phone and website being clickable. I have 3 rows across, one image in the first and last row, then my info given in a stack of images in the middle row. Finally, there is one long image on the bottom that spans the entire signature. I had initially got rid of the spacing around all of my other images (I'll include my code before tbody at the bottom), but my stacked, middle-row info still had unwanted spacing above and below the images.
I did not need to add any extra details after or . The snippet that mattered was adding height to the image style. All of my images have the border-collapse and display style to get rid of the spacing, and then adding the height to the images in the middle-row stack resolved the lingering above/below spacing.
<img height="26" width="175" alt="" border="0" style="border-collapse:collapse; display:block!important; height:26px;" src="http://imageurl.jpg">
Here's the html I have before tbody that also impacts spacing:
<meta name="viewport" content="width=device-width" http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
td {line-height:0; font-size:0.0em;}
img {display:block; float:left; padding:0; margin:0; align:absbottom; align:texttop;}
</style>
<div dir="auto">
<table id="zs-output-sig" bgcolor="#FFFFFF" width="500" height="146" border="0" cellpadding="0" cellspacing="0">
<tbody>
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! :)
I am trying to add an image to a footer within an email client. Within older Safari browsers and Outlook Mac 2011, the image moves slightly to the right of the rest of the table.
I have the border zeroed out through the HTML attribute but it didn't help. I then attempted to zero out the border with an inline style and that didn't work.
Is there any available solutions? (I have also attached a snapshot of what my problem looks like)
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footer-arch.png" /></td>
</tr>
</table>
<table bgcolor="#efecef" class="content" width="600" border="0" cellpadding="10" cellspacing="0" align="center">
<!-- Footer 600px wrapper -->
<tr>
<td>
<!-- Social & Mobile Boxes -->
<table class="footerboxes" width="290" cellpadding="5" cellspacing="0" border="0" align="left">
<tr>
<td>
<!-- SocialBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;" >
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Be social.
</strong>
</span>
</td>
<td>
<a href="http://facebook.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/fb_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://twitter.com/myfamilydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/twitter_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://pinterest.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/pin_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://youtube.com/thefamilydollar" target="_blank" border="0"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/youtube_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- MobileBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Go mobile.
</strong>
</span>
</td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color:#636363;">
<span>
Text
</span>
<strong style="color:#ff0000;">
VALUE
</strong>
to
<strong style="color:#ff0000;">
28767
</strong>
<br>
<span>
Visit
</span>
<a href="http://m.familydollar.com" style="text-decoration: none; color:#ff0000;">
m.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- BlogBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Get tips.
</strong>
</span>
</td>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size: 13px;">
<span>
Visit
</span>
<a href="http://blog.familydollar.com" style="text-decoration: none; color: #ff0000;">
blog.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Social & Mobile Boxes -->
<table cellpadding="10" cellspacing="0" align="center" class="footer">
<tr>
<td align="left">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
<span style="font-style: italic;" >
While Quantities Last. No Sales To Dealers. Some Items Not Available At All Stores. Limited Quantities On Some Items
</span>
<br>
<br>
This email was sent to %%emailaddr%% by:
<br>
%%Member_Busname%%
<br>
%%Member_Addr%%
<br>
%%Member_City%%, %%Member_State%%, %%Member_PostalCode%%
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="5" width="100%">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
To ensure future delivery of email, please add
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book-Email Address" target="_blank" style="text-decoration: none; color: #ff0000;">
familydollar#efamilydollar.com
</a>
to your safe sender list or address book.
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book Click Here" target="_blank" style="text-decoration: underline; color: #ff0000;">
Click here for instructions.
</a>
<br><br>
We respect your right to privacy - View our policy
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="verdana" size="1" color="#777777">
<br>
Manage Subscriptions | Update Profile | Unsubscribe<br><br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
Just a heads up. Took me a bit of time to see what the issue was. Didn't realize it was the top of the footer that was out (hard to see since it's ever so slight).
Try:
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footer-arch.png" width="600" height="53" style="display: block; border: 0;" /></td>
</tr>
</table>
I made the footer image parent table the same width as the table below it.
Also I recommend setting width and heights for ALL images and do it in the HTML. Not sure if it would have a mass of difference but always better to do things in the most basic format possible (as in: if you can do it in the HTML over the CSS then do!)
Solution 2:
Wrap both tables in a 600 width table that is centered. Then make both child tables go 100%.
Building on lejimmie answer, try adding the image into the footer table and removing the cellpadding and insert it into the TD on the row below the image.
That should contain the image to same restrictions of footer below and remove possibility of misalignment.
See below for example:
<table bgcolor="#efecef" class="content" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<!-- Footer 600px wrapper -->
<tr>
<td align="center" bgcolor="#FFFFFF" style="display:block; border-collapse:collapse;"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footer-arch.png" style="display:block;" /></td>
</tr>
<tr>
<td style="padding:10px;">
<!-- Social & Mobile Boxes -->
<table class="footerboxes" width="290" cellpadding="5" cellspacing="0" border="0" align="left">
<tr>
<td>
<!-- SocialBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;" >
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Be social.
</strong>
</span>
</td>
<td>
<a href="http://facebook.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/fb_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://twitter.com/myfamilydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/twitter_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://pinterest.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/pin_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://youtube.com/thefamilydollar" target="_blank" border="0"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/youtube_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- MobileBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Go mobile.
</strong>
</span>
</td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color:#636363;">
<span>
Text
</span>
<strong style="color:#ff0000;">
VALUE
</strong>
to
<strong style="color:#ff0000;">
28767
</strong>
<br>
<span>
Visit
</span>
<a href="http://m.familydollar.com" style="text-decoration: none; color:#ff0000;">
m.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- BlogBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Get tips.
</strong>
</span>
</td>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size: 13px;">
<span>
Visit
</span>
<a href="http://blog.familydollar.com" style="text-decoration: none; color: #ff0000;">
blog.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Social & Mobile Boxes -->
<table cellpadding="10" cellspacing="0" align="center" class="footer">
<tr>
<td align="left">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
<span style="font-style: italic;" >
While Quantities Last. No Sales To Dealers. Some Items Not Available At All Stores. Limited Quantities On Some Items
</span>
<br>
<br>
This email was sent to %%emailaddr%% by:
<br>
%%Member_Busname%%
<br>
%%Member_Addr%%
<br>
%%Member_City%%, %%Member_State%%, %%Member_PostalCode%%
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="5" width="100%">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
To ensure future delivery of email, please add
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book-Email Address" target="_blank" style="text-decoration: none; color: #ff0000;">
familydollar#efamilydollar.com
</a>
to your safe sender list or address book.
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book Click Here" target="_blank" style="text-decoration: underline; color: #ff0000;">
Click here for instructions.
</a>
<br><br>
We respect your right to privacy - View our policy
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="verdana" size="1" color="#777777">
<br>
Manage Subscriptions | Update Profile | Unsubscribe<br><br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
When #lejimmie presented a couple of solutions for me to try out, it worked perfectly but not quite for a responsive email, it did however provided an excellent guide to develop a proper solution.
For this email, a simple solution to add a media query to the header wouldn't have done the job, because we don't have control over the header code content. Frustrating working with Exact Target sometimes on SalesForce.
This is what got the job done and so far seems to work perfectly across both mobile and desktop email clients...
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td align="center"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footerarch.png" width="100%" style="max-width: 600px; display: block; border: 0;"></td>
</tr>
</tbody>
</table>
<table bgcolor="#efecef" class="content" width="600" border="0" cellpadding="10" cellspacing="0" align="center">
<!-- Footer 600px wrapper -->
<tr>
<td>
<!-- Social & Mobile Boxes -->
<table class="footerboxes" width="290" cellpadding="5" cellspacing="0" border="0" align="left">
<tr>
<td>
<!-- SocialBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;" >
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Be social.
</strong>
</span>
</td>
<td>
<a href="http://facebook.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/fb_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://twitter.com/myfamilydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/twitter_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://pinterest.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/pin_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://youtube.com/thefamilydollar" target="_blank" border="0"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/youtube_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- MobileBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Go mobile.
</strong>
</span>
</td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color:#636363;">
<span>
Text
</span>
<strong style="color:#ff0000;">
VALUE
</strong>
to
<strong style="color:#ff0000;">
28767
</strong>
<br>
<span>
Visit
</span>
<a href="http://www.familydollar.com" style="text-decoration: none; color:#ff0000;">
familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- BlogBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Get tips.
</strong>
</span>
</td>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size: 13px;">
<span>
Visit
</span>
<a href="http://blog.familydollar.com" style="text-decoration: none; color: #ff0000;">
blog.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Social & Mobile Boxes -->
<table cellpadding="10" cellspacing="0" align="center" class="footer">
<tr>
<td align="left">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
<span style="font-style: italic;" >
While Quantities Last. No Sales To Dealers. Some Items Not Available At All Stores. Limited Quantities On Some Items
</span>
<br>
<br>
This email was sent to %%emailaddr%% by:
<br>
%%Member_Busname%%
<br>
%%Member_Addr%%
<br>
%%Member_City%%, %%Member_State%%, %%Member_PostalCode%%
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="5" width="100%">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
To ensure future delivery of email, please add
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book-Email Address" target="_blank" style="text-decoration: none; color: #ff0000;">
familydollar#efamilydollar.com
</a>
to your safe sender list or address book.
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book Click Here" target="_blank" style="text-decoration: underline; color: #ff0000;">
Click here for instructions.
</a>
<br><br>
We respect your right to privacy - View our policy
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="verdana" size="1" color="#777777">
<br>
Manage Subscriptions | Update Profile | Unsubscribe<br><br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
Thank you #lejimmie again, you led me to the right direction.
In order to learn more about HTML, I am designing an HTML newsletter template from scratch. I got everything working properly. However , I have a section where I want to add 4 social media icons, distributed evenly across the table row.
I am trying to do this mostly with HTML and inline css due to the requirements of the various email software but I cant seem to get it to work. I've attached you can see what I mean (I'm building this on a local machine so no real images there). I just need the 4 images spread evenly across the row.
Thanks a lot in advance
<!-- Start Social Media -->
<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591">
<tr>
<td style="font-family: Arial, Verdana, sans-serif; color:#ffffff"> <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span>
<br>
<br>
</td>
</tr>
<tr>"
<td align="center" valign="middle"> <img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;">
</td>
<td align="center" valign="middle"> <img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;">
</td>
<td align="center" valign="middle"> <img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block;">
</td>
<td align="center" valign="middle"> <img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;">
</td>
You need colspan="4" on the "Connect with us" table cell, so that it spans the four columns of the row below.
You are just missing the colspan on the first tr td. Add this and it should work.
You also seem to have some table padding which is causing an offset from the left. I would recommend adding it to the right as well as this will make everything seem off centre.
<!-- Start Social Media -->
<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591">
<tr>
<td style="font-family: Arial, Verdana, sans-serif; color:#ffffff" colspan="4"> <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span>
<br>
<br>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<a href="https://www.facebook.com/" target="blank">
<img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;">
</a>
</td>
<td align="center" valign="middle">
<a href="https://www.twitter.com/" target="blank">
<img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;">
</a>
</td>
<td align="center" valign="middle">
<a href="https://www.youtube.com/" target="blank">
<img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block;">
</a>
</td>
<td align="center" valign="middle">
<a href="#" target="blank">
<img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;">
</a>
</td>
</tr>
</table>
Alternative's can be done in CSS and i would highly recommend learning CSS next on your journey into HTML and web development as CSS will be much more helpful and usable in future work.
You can use attribute valign for td.
<table>
<tr>
<td valign="middle">
<img src="http://logonoid.com/images/stack-overflow-logo.png" height="30px">
</td>
</tr>
</table>
http://codepen.io/anon/pen/azvEPW
If you are talking about centering the image in the table cell,
<td align="center">
or
<td style="text-align: center;">
So basically you add text-align: center; to your style
try this
<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591">
<tr>
<td style="font-family: Arial, Verdana, sans-serif; color:#ffffff"> <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span>
<br>
<br>
</td>
</tr>
<tr>"
<td align="center" valign="middle"> <img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;margin:auto;">
</td>
<td align="center" valign="middle"> <img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;margin:auto;">
</td>
<td align="center" valign="middle"> <img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block; margin:auto;">
</td>
<td align="center" valign="middle"> <img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;margin:auto;">
</td>
You can set static size.
100 / 4 = 25
<td align="center" valign="middle" width="25%">
And that's better to change "padding: 25px 0px 0px 15px" to "padding: 25px 0px 0px 0px" because 15 set on the left of the table and shift all images to right.
I'd just like to put in an email a series of 4 social icons centered (horizontally) but they keep being put by gmail and yahoo on the left side!
<body bgcolor="#FFFFFF" style="margin: 0;padding: 0;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;width: 100%;">
<table style="margin: 0;padding: 0;width: 100%;border-collapse: collapse; background-color: #F2F2F2;">
<tr>
<td style="margin: 0 auto; padding: 0;display: block;max-width: 600px;clear: both; align: center; valign: top; background-color:#ffffff ;">
<table width="100%" style="padding:0px 5px 0px 5px;" cellspacing="0" border="0" bgcolor="#ffffff" align="center">
<tbody>
<tr>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px; margin-bottom: 30px;">
<a rel="nofollow" target="_blank" href="<%= t("social_urls.facebook_page_url") %>">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/facebook_icon.png" alt="Facebook">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/twitter_icon.png" alt="Twitter">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/pinterest_icon.png" alt="Pinterest">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/tumblr_icon.png" alt="Tumblr">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/instagram_icon.png" alt="Instagram">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
Here is a jsfiddle.
I want them not split over the whole line but quite "concentrated" as you see each icon must only have a few pixels horizontally between them (6px left, 6px right)
I believe that should be text-align: center instead of just align: center in your main table data cell (because you're calling it as a css style parameter). Also, vertical-align instead of valign.
If that doesn't do it, try adding text-align: center; to the table style, then switch out the float:left on each td so they're display: inline-block; instead.
Good luck!
EDIT---------------------------------------------------------------------------
How about this approach using only tables?
Check the new Fiddle
HTML
<table style="margin: 0;padding: 0;width: 100%;border-collapse: collapse; background-color: #F2F2F2;">
<colgroup>
<col width="20%" />
<col width="60%" />
<col width="20%" />
</colgroup>
<tr>
<td>
</td>
<td style="text-align:center">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/facebook_icon.png" alt="Facebook" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/twitter_icon.png" alt="Twitter" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/pinterest_icon.png" alt="Pinterest" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/tumblr_icon.png" alt="Tumblr" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/instagram_icon.png" alt="Instagram /" />
</a>
</td>
<td>
</td>
</tr>
</table>
In email always use align="left|center|right" for horizontal alignment and valign="top|middle|bottom" for vertical. Apply this to your table cells <td align="center"> in your case.
Here is the jsfiddle with two methods that will work
Here is a very basic example of both align and valign:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#252525">
<tr>
<td align="center" valign="middle" height="100">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
</td>
</tr>
</table>