I am trying to create an html email newsletter and achieving this look.
So far I have the two images in one table and each image is in it's own table data.
<table align="center">
<tr>
<td width="250" bgcolor="#ffffff">
<img src="PickYourSale-wrinkles-v2.jpg" width="249" height="249">
</td>
<td width="250" bgcolor="#ffffff">
<img src="PickYourSale-NEW-v2.jpg" width="249" height="249">
</td>
</tr>
</table>
I am trying to figure out how I can get the call to action button exactly like in this image. Anyone know how?
jsfiddle - https://jsfiddle.net/sd128bbv/
You can easily achieve this with CSS and adding an extra row for buttons.
Take a look at this snippet.
table#newletter {
font-family: sans-serif;
}
tr.buttons {
text-align: center;
}
a.button {
padding: 10px;
border-radius: 4px;
background: indigo;
color: white;
font-weight: bold;
text-decoration: underline;
}
<table id="newsletter" align="center">
<tr>
<td width="250" bgcolor="#ffffff">
<img src="http://cdn2-www.thefashionspot.com/assets/uploads/gallery/earth-day-beauty-awards-2015/john-masters-organics-sea-mist-sea-salt-spray.jpg" width="249" height="249">
</td>
<td width="250" bgcolor="#ffffff">
<img src="http://healthfulmama.com/wp-content/uploads/2012/03/bottles.jpg" width="249" height="249">
</td>
</tr>
<tr class="buttons">
<td><a class="button" href="http://www.google.com" title="Sample button link">Clickie ></a>
</td>
<td><a class="button" href="http://www.google.com" title="Sample button link">Clickie ></a>
</td>
</tr>
</table>
Yoy can try this way
<table align="center">
<tr>
<td width="250" bgcolor="#ffffff">
<img src="PickYourSale-wrinkles-v2.jpg" width="249" height="249" alt="example">
</td>
<td width="250" bgcolor="#ffffff">
<img src="PickYourSale-NEW-v2.jpg" width="249" height="249" alt="example">
</td>
</tr>
<tr>
<td width="250" style = "text-align:center">
<button>click me</button>
</td>
<td width="250" style = "text-align:center">
<button>click me</button>
</td>
</tr>
</table>
Related
I used a free online HTML signature creator but now my always emails land in junk folders when I use the signature.
I read online that the code needs to be formatted correctly to avoid being labeled as spam.
Here's how the signature looks and should look:
and here's my code (I had to remove all links to avoid my question being marked as spam):
<tbody>
<tr>
<td style="font-size:0;height:24px;line-height:0;"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:Arial;line-height:1.15;color:#000;">
<tbody>
<tr>
<td style="height:1px;width:91px;vertical-align:top;padding:.01px 1px;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<td style="vertical-align:top;padding:.01px;width:91px;text-align:center;">
<img src="logo" height="90" width="91" style="width:91px;vertical-align:middle;border-radius:0;height:91px;">
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" style="padding:.01px 0.01px 0.01px 18px;vertical-align:top;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<td style="line-height:1.32;padding-bottom:18px;;font-family:Arial;"><span style="text-transform:initial;font-weight:bold;color:#62738C;letter-spacing:0;line-height:1.92;font-size:20px;"> First Last Name </span><br><span style="text-transform:initial;font-weight:;color:#62738C;line-height:1.2;font-size:14px;"> Astrobnb | Host Services </span></td>
<td style="vertical-align:bottom;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;" align="right">
<tbody>
<tr>
<td style="padding:.01px 0.01px 18px 50px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<img width="28" height="28" src="fb-icon" style="float:left;border:none;" border="0" alt="facebook">
</td>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<img width="28" height="28" src="ig-icon" style="float:left;border:none;" border="0" alt="instagram">
</td>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<img width="28" height="28" src="yelp-icon" style="float:left;border:none;" border="0" alt="yelp">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding:.01px 0.01px 18px 0.01px;border-bottom:solid 1px #45668E;border-top:solid 1px #45668E;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:100%;">
<tbody>
<tr>
<td nowrap="" width="383" style="padding-top:18px;white-space:nowrap;width:383px;font-family:Arial;">
<p style="margin:.1px;line-height:1;">
<span style="font-size:12px;color:#62738C;white-space:nowrap;">
<img src="phone-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13"><!--[if mso]><span> </span>
<![endif]--><span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> 555-555-5555</span> <img src="web-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13"><!--[if mso]><span> </span>
<![endif]--><span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> astrobnb.co</span> <img src="email-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13"><!--[if mso]><span> </span>
<![endif]--><span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> email#email.com</span>
</span>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody> <table cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;">
<tbody>
<tr>
<td style="line-height:0;"></td>
<span style="display: block; text-align: center;"> <br> <a target="_blank" rel="noopener noreferrer" href="website" color="#45668E" class="sc-eqIVtm kRufpp" style="border-width: 6px 100px; border-style: solid; border-color: rgb(36, 160, 237); display: inline-block; background-color: rgb(36, 160, 237); color: rgb(255, 255, 255); font-weight: 500; text-decoration: none; text-align: center; line-height: 30px; font-size: 15px; border-radius: 20px;">Book a Cleaning Today!</a>
</table>
</td>
</tr>
</tbody>
</table>
I’m not well versed in HTML/CSS, I’m very new to it so I’m unsure of how to clean up the code and how to correctly format it.
When I remove the signature from my test emails, my messages land in the appropriate inbox.
Do consider following points while adding raw HTML in email or creating email templates:
Sloppy HTML tends to be characteristic of spammers, spammers are busy spamming, so they don't have the time and resources to test their email code to make sure the content renders well.
While issues with your email rendering and broken HTML might not cause your emails to end up in spam right away, they can annoy your subscribers or they might find your message suspicious and hit the dreaded “mark as spam” button as a result.
Also an email HTML is NOT equal to Web HTML.
There are a lot of obvious HTML tags and CSS attributes that are not supported by major email clients.
The button of the form will require you to use JavaScript (which is a problem).
Most email clients simply don't support flash content as it is considered unsafe for something as sensitive as email. Email clients block emails containing flash. You can use GIFs as an alternative to make your emails more appealing.
Spam filters and more importantly firewalls always take a "better to be safe than sorry" approach. So, all your well-intentioned emails with any type of script will go straight to the SPAM folder.
If your email has different versions of HTML and plain text email or broken HTML, then your emails will go into the spam folder.
Broken HTML will appear sloppy and unreadable on almost all email clients. Not only will users mark your email as SPAM, but it will also alert SPAM filters (they will think you could be a lazy spammer using unsophisticated tools).
Try this and see if this works or else you can modify the HTML as per your need
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Email Template</title>
</head>
<body>
<table>
<tbody>
<tr>
<td style="font-size:0;height:24px;line-height:0;"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:Arial;line-height:1.15;color:#000;">
<tbody>
<tr>
<td style="height:1px;width:91px;vertical-align:top;padding:.01px 1px;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<td style="vertical-align:top;padding:.01px;width:91px;text-align:center;">
<a href="website" style="display:block;" target="_blank" rel="nofollow noreferrer">
<img src="logo" height="90" width="91" style="width:91px;vertical-align:middle;border-radius:0;height:91px;">
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" style="padding:.01px 0.01px 0.01px 18px;vertical-align:top;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<td style="line-height:1.32;padding-bottom:18px;;font-family:Arial;">
<span style="text-transform:initial;font-weight:bold;color:#62738C;letter-spacing:0;line-height:1.92;font-size:20px;"> First Last Name </span>
<br>
<span style="text-transform:initial;font-weight:;color:#62738C;line-height:1.2;font-size:14px;"> Astrobnb | Host Services </span>
</td>
<td style="vertical-align:bottom;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;" align="right">
<tbody>
<tr>
<td style="padding:.01px 0.01px 18px 50px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<a href="fb" target="_blank" rel="nofollow noreferrer">
<img width="28" height="28" src="fb-icon" style="float:left;border:none;" border="0" alt="facebook">
</a>
</td>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<a href="ig" target="_blank" rel="nofollow noreferrer">
<img width="28" height="28" src="ig-icon" style="float:left;border:none;" border="0" alt="instagram">
</a>
</td>
<td align="left" style="padding-right:6px;text-align:center;padding-top:0;">
<a href="yelp" target="_blank" rel="nofollow noreferrer">
<img width="28" height="28" src="yelp-icon" style="float:left;border:none;" border="0" alt="yelp">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding:.01px 0.01px 18px 0.01px;border-bottom:solid 1px #45668E;border-top:solid 1px #45668E;">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:100%;">
<tbody>
<tr>
<td nowrap="" width="383" style="padding-top:18px;white-space:nowrap;width:383px;font-family:Arial;">
<p style="margin:.1px;line-height:1;">
<span style="font-size:12px;color:#62738C;white-space:nowrap;">
<img src="phone-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13">
<a href="tel:555-555-5555" target="_blank" style="font-family:Arial;text-decoration:unset;" rel="nofollow noreferrer">
<span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> 555-555-5555</span>
</a> <img src="web-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13">
<a href="website" target="_blank" style="font-family:Arial;text-decoration:unset;" rel="nofollow noreferrer">
<span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> astrobnb.co</span>
</a> <img src="email-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13">
<a href="mailto:email#email.com" target="_blank" style="font-family:Arial;text-decoration:unset;" rel="nofollow noreferrer">
<span style="line-height:1.2;font-family:Arial;color-scheme:only;color:#62738C;white-space:nowrap;"> email#email.com</span>
</a>
</span>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<table cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;">
<tbody>
<tr>
<td style="line-height:0;"></td>
<span style="display: block; text-align: center;">
<br>
<a target="_blank" rel="noopener noreferrer" href="website" color="#45668E" class="sc-eqIVtm kRufpp" style="border-width: 6px 85px; width: -webkit-fill-available; border-style: solid; border-color: rgb(36, 160, 237); display: inline-block; background-color: rgb(36, 160, 237); color: rgb(255, 255, 255); font-weight: 500; text-decoration: none; text-align: center; line-height: 30px; font-size: 15px; border-radius: 20px;">Book a Cleaning Today!</a>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I'm a really really new beginner. I have been tasked with making an email signature by my boss and I cannot figure out how to produce it. I'm using dreamweaver and have written really basic HTML emails that sent successfully, so my code isn't the absolute worst.
I'm trying to recreate this (made in word):
I want the four lines to the right of the logo to be left-aligned, and the bottom two lines to be centered. I don't have any alignment defined in table {} or tbody tr td {}.
Here is how it looks in the chrome preview:
I will comment to show you how it looks in dreamweaver
in style:
table {
border-collapse: collapse;
border-spacing: 0;
}
tbody tr td {
font-family: sans-serif;
font-style: bold;
color: black;
font-size: 13px;
}
.B {font-size: 14px;
text-align: left !important;
}
.smallcaps {
font-variant: small-caps;
font-size: 14px;
text-align: left !important;
}
.bcorp {
font-variant: small-caps;
font-size: 14px;
text-align: center;
}
.pad {
padding-left: 12px;
padding-right: 12px;
vertical-align: bottom;
text-align: center;
}
a {
text-decoration: none;
text-align: center;
}
And in table>tbody:
<tr>
<td width="96" rowspan="6"><a><img src="http:///wp-content/uploads/2016/09/Logo-01.jpg" alt="Logo" width="96" height="90"/></a></td>
<td height="1" colspan="2"> </td>
</tr>
<tr>
<td height="9" colspan="2"><span class="B">Name Here, Position Title</span></td>
</tr>
<tr>
<td height="20" colspan="2"><span class=smallcaps>Company Name</span>.</td>
</tr>
<tr>
<td height="20" colspan="2">12345 SW 22 P<span class=smallcaps>kwy</span> | P<span class=smallcaps>ortland</span>, OR 97111 | S<span class=smallcaps>te</span> 123</td>
</tr>
<tr>
<td height="7" colspan="2">D<span class=smallcaps>esk</span>: 503.123.4567 | C<span class=smallcaps>ell</span>: 503.987.6543</td>
</tr>
<tr>
<td height="1" colspan="2"> </td>
</tr>
<tr>
<td colspan="2" cellpadding="5">
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
</td>
<td> </td>
</tr>
<tr>
<td height="30" colspan="2"><span class=bcorp>A Certified B Corporation®</span></td>
<td width="101"> </td>
</tr>
Edited: added code - hope it's clear enough to help
Ok, please check this and see if this will help you. About the table issue.
Some Email program don't render Inline-CSS to the body of email. You may consider use the style attributes to support what Table design is missing. I used to do this when generating newsletter.
<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
<td style="line-height:1.6;padding: 5px 15px;">
<div>Name Here, Position Title</div>
<div>Company Name</div>
<div>Stress address wrapped around here</div>
<div>Desk: 123.456.789 | Cell: 123.456.789</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td align="center">
<table align="center" width="50%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td> Icon1 </td>
<td> Icon2 </td>
<td> Icon3 </td>
<td> Icon4 </td>
<td> Icon5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
A Certified B Corporation <sup>®</sup>
</td>
</tr>
</table>
</td>
</tr>
</table>
You can achieve the required alignment in the cells using CSS properties: text-align:center and text-align:left. By the way, a row defaults to text-align:left so if you don't put the alignment then it by default goes to left alignment.
And for merging the cells, you can use rowspan and colspan attribute in the tag inside HTML.
I am posting a working example with complete CSS and HTML code for your consideration here: https://jsfiddle.net/rahuldhangar/0s5usofv/
HTML code:
<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
<td style="line-height:1.6;padding: 5px 15px;">
<div>Name Here, Position Title</div>
<div>Company Name</div>
<div>Stress address wrapped around here</div>
<div>Desk: 123.456.789 | Cell: 123.456.789</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td align="center">
<ul style="list-style:none;margin:0;padding:0;">
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
</ul>
</td>
</tr>
<tr>
<td align="center">
A Certified B Corporation <sup>®</sup>
</td>
</tr>
</table>
</td>
Working with provided HTML and I'm looking to figure out why there is a gap in Outlook 07,10,13. Renders fine in other Outlook versions. The gap varies between outlook version, but a gap nonetheless
Screenshot:
HTML Email for review:
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td height="10" colspan="3">
<p style="font-weight:bold; color:#0018A8; font-size:13px">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="10" height="6">
</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="border-style: none">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132">
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's
maiden name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please click here to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</body>
</html>
The pasted example shows the gaps more extremely than I even see in litmus tests, but not showing in Chrome when I test the HTML locally.
FIX was to add inline CSS to the images and remove the <tbody>
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="padding:0;margin:0;display:block;border-style:none;">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
</table>
</th>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's maiden
name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please <a href="http://payments.53.com/forms/SubscriptionManagement"
target="_blank">click here</a> to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>
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.
I have a table in my html page, in the table the first tr has images and next tr has text and it look's good in IE and Chrome browser's like this
but when I use in Firefox browser it looks like this:
I just used CSS (text-align:center) for td and (border-collapse: collapse,width: 100%) for table that's all...
My html code:
<table class="foottable" border="0" cellpadding="0" cellspacing="1">
<tr>
<td class="foottabcen"><img id="check" src="images/unchecked.png"/></td>
<td class="foottabcen"><img id="export" class="image1" src="images/excelicon.png" /></td>
<td class="foottabcen"><img id="test" class="image1" src="images/mailicon.png" /></td>
<td class="foottabcen"><img id="sms" class="image2" src="images/smsicon.png"/></td>
<td class="foottabcen"><img class="image1" src="images/charticon.png" /></td>
<td class="foottabcen"><img id="print" class="image1" src="images/printericon.png"/></td>
</tr>
<tr>
<td class="foottabcen">Select all</td>
<td class="foottabcen">Export to excel</td>
<td class="foottabcen">Mail</td>
<td class="foottabcen">SMS</td>
<td class="foottabcen">Graph</td>
<td class="foottabcen">Print</td>
</tr>
</table>
My CSS code:
.foottable
{
width: 100%;border-top: 2px solid #D4D4D4;border-collapse: collapse;background: white;
}
.foottabcen
{
color:black;text-align: center;
}
please help me.........
Not sure why you would want to do this way but I guess the better way would have been putting the image and text in the same td like:
<td>
<a href="#">
<span><img src="images/exl_icon.png" alt="" /></span>
<small>Export to excel</small>
</a>
</td> /* <a> is added considering these are clickable elements */
and apply display:block; to 'a', 'span' and 'small' through your css.
and probably the best way would have been just use text as link in the td and add a icon specific class to it:
<td>
Export to excel
</td>
and in your css it will look like this:
.ico_excel{
display:block;
text-align:center;
padding-top: x px; /* x should be more than the height of the icon */
background: transparent url(images/exl_icon.png) center top no-repeat;
}
try this
<table class="foottable" border="0" cellpadding="0" cellspacing="1">
<tr>
<td class="foottabcen"><img id="check" src="images/unchecked.png"/></td>
<td class="foottabcen"><img id="export" class="image1" src="images/excelicon.png" /></td>
<td class="foottabcen"><img id="test" class="image1" src="images/mailicon.png" /></td>
<td class="foottabcen"><img id="sms" class="image2" src="images/smsicon.png"/></td>
<td class="foottabcen"><img class="image1" src="images/charticon.png" /></td>
<td class="foottabcen"><img id="print" class="image1" src="images/printericon.png"/></td>
</tr>
<tr>
<td class="foottabcen1">Select all</td>
<td class="foottabcen1">Export to excel</td>
<td class="foottabcen1">Mail</td>
<td class="foottabcen1">SMS</td>
<td class="foottabcen1">Graph</td>
<td class="foottabcen1">Print</td>
</tr>
</table>
and css...give height for foottabcen as per ur requirement
.foottable
{
width: 100%;border-top: 2px solid #D4D4D4;border-collapse: collapse;
background: white;
}
.foottabcen
{
color:black;text-align: center;height:50px;
}
.foottabcen1
{
color:black;text-align: center;
}
check demo here..... http://jsfiddle.net/dBFfd/
did you try this...
<table>
<tr>
<td>
<img id="check" src="images/unchecked.png"/>
<span>sample</span>
</td>
</tr
</table>
but if you want my free assistant just email your code i try to fix it....