I am working on one project where I want to reassign a html text to a rich text control which is designed for web. This rich text control support html doc to display the record.
I am facing problem while uploading html with images as follows:
<font size=2 color="#000000" face="Arial">
<div>
<span style="font-size: 9pt; font-family: 'arial'; color: #000000;">Test Embedded Image </span>
<span style="font-size: 8pt; font-family: 'Arial'; color: #000000;">graphic</span>
</div>
<div>
<span style="font-size: 9pt; font-family: 'arial'; color: #000000;">Text after image sd</span>
<div><table width=538 border=1 cellpadding=0 bordercolor="#414141" cellspacing=0>
<tr valign=top>
<td width=180 valign=top><font size=2 color="#000000" face="Arial">
<div>
<span style="font-size: 9pt; font-family: 'arial'; color: #000000;">test </span>
</div>
</font>
</td>
<td width=178 valign=top><font size=2 color="#000000" face="Arial">
<div>
<img src="Image_1.PNG" width="166" height="238" border="0" alt="graphic"/>
</div>
</font>
</td>
<td width=178 valign=top><font size=2 color="#000000" face="Arial">
<div>
<img src="Image_2.PNG" width="166" height="238" border="0" alt="graphic"/>
</div>
</font>
</td>
</tr>
<tr valign=top>
<td width=180 valign=top><font size=2 color="#000000" face="Arial">
<div>
<img src="Image_3.PNG" width="166" height="238" border="0" alt="graphic"/>
</div>
</font>
</td>
<td width=178 valign=top><font size=2 color="#000000" face="Arial">
<div>
<span style="font-size: 8pt; font-family: 'Arial'; text-decoration: underline; color: #0066cc;"> xxx</span>
</div>
</font>
</td>
<td width=178 valign=top><font size=2 color="#000000" face="Arial">
<div>
<span style="font-size: 8pt; font-family: 'Arial'; text-decoration: underline; color: #0066cc;"> Web URL</span>
</div>
</font>
</td>
</tr>
</table>
</div>
But the images are replaced with the graphic text as shown in fig.
Can anyone tell me why this is happening?
The alt tag in img is set as graphic. It will show only if those images can't be found.Check the images if they are in right directory.
It's working in the FIDDLE here.
Related
I am email template designed which contains a Banner Image. Everything is aligned perfectly except the banner. Below is my code snippet and output what I am receiving.
<p><img src="medical.jpg" width="100%" height="144" /></p>
<p> </p>
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Hello</span></span>
</span>
</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">You Project(${URI_REF}) has been submitted and is being reviewed by <strong>${u_project_manager}</strong>.</span></span>
</p>
<p> </p>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Title</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${short_description}</span></span>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Submitted by</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Approver</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Department</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${submitter}</span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${u_project_manager}</span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${department}</span></span>
</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;">Thank you,<br /></span><span style="font-family: 'Montserrat', sans-serif;">IT Service Desk</span></span>
</p>
<p> </p>
Output:
In my Gmail it is working perfectly fine but when it comes to outlook it is not working fine
Output:
Gmail Output
Outlook Output
In the Outlook the complete page itself displays the banner but in gmail it looks Okay. Am I doing anything wrong?
Remove the height and change the width of 100% for the image to the width of your email.
Example:
<p><img src="medical.jpg" width="100%" height="144" /></p>
should be:
<p><img src="medical.jpg" width="600" /></p>
The width of 600 pixels will be the width of your email. Height attribute can be dropped because if you assign a width to an image, height is proportionate. Don't use width in style tag, Outlook ignores it.
Also by default if you are using retina images (or really big ones) Outlook will resize the image to its original dimensions if it does not find a width attribute.
Try using height property in percent, something like 35% or use 144px
<img src="medical.jpg" width="100%" height="144px" />
or
<img src="medical.jpg" width="100%" height="35%" />
I have designed a Email Template that we are going to use for one of our client. When i see it from the System Preview i am able to see the color but once email is received the format is set but color is not visible it is displaying as Black & White photo without any colors in the body.
Below is my CSS Code:
<p style="text-align: left;"><span style="font-family: cambria;"> <span style="font-size: 18pt;"> <span style="color: #00629f;">IBM Service Desk</span> </span> </span> <span style="font-family: cambria;"> <img style="align: right;" title="" src="sys_attachment.do?sys_id=0d50b5462f49c010209857892799b644" alt="" width="60" height="60" align="right" border="" hspace="" vspace="" /></span></p>
<style><!--
table {
font-family: cambria;
}
td.bg1{
background-color:#E2E2E3;
color:#00629F;
}
td.bg2{
color:black;
}
--></style>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p>Click here to view Incident: ${URI_REF}</p>
</td>
</tr>
<tr>
<td class="bg1" colspan="5">Short Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${short_description}</td>
</tr>
<tr>
<td class="bg1" colspan="5">Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${description}</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: cambria;"><span style="font-size: 12pt;">Thank you</span>,</span></p>
<p><span style="font-family: cambria;"><span style="font-size: 14pt;"><span style="color: #00629f;">IBM Service Desk</span> </span></span></p>
Output when i previewed in the System:
System Preview Email
Once it is received to outlook then the email i am getting as shown Outlook Email
There is no any big mistake in your code, Please arrange your code properly. Table data color not shown because the style property not consuming. In your code you put the style tag as alone, Please move your style tag into head tag. The code will be work fine.
<head>
<style>
table {
font-family: cambria;
}
td.bg1{
background-color:#E2E2E3;
color:#00629F;
}
td.bg2{
color:black;
}
</style>
</head
<body>
<p style="text-align: left;"><span style="font-family: cambria;"> <span style="font-size: 18pt;"> <span style="color: #00629f;">IBM Service Desk</span> </span> </span> <span style="font-family: cambria;"> <img style="align: right;" title="" src="sys_attachment.do?sys_id=0d50b5462f49c010209857892799b644" alt="" width="60" height="60" align="right" border="" hspace="" vspace="" /></span></p>
<style>
</style>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p>Click here to view Incident: ${URI_REF}</p>
</td>
</tr>
<tr>
<td class="bg1" colspan="5">Short Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${short_description}</td>
</tr>
<tr>
<td class="bg1" colspan="5">Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${description}</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: cambria;"><span style="font-size: 12pt;">Thank you</span>,</span></p>
<p><span style="font-family: cambria;"><span style="font-size: 14pt;"><span style="color: #00629f;">IBM Service Desk</span> </span></span></p>
</body>
As you can see in this fiddle
Fiddle
The table starts with all the rows having the same height but later they have bigger heights, why is that?
This is just some portion of the table, please check the fiddle
<table border="2" cellpadding="0" cellspacing="0"
height="190">
<tbody>
<tr bgcolor="#ffffcc">
<td class="Normal" style="width: 116px;"
height="16" valign="top">
<p style="" align="center"><strong><font
face="Arial, Helvetica, sans-serif" size="2">
<span
style="font-size: 10pt; font-family: Arial; color: blue"> <font
color="#000066"> FECHA</font></span></font></strong></p>
</td>
<td class="Normal" height="16" valign="top"
width="90">
<p style="" align="center"><strong><font
face="Arial, Helvetica, sans-serif" size="2">
<span
style="font-size: 10pt; font-family: Arial;"> <font
color="#000066">Número</font></span></font></strong></p>
</td>
<td colspan="3" class="Normal" height="16"
valign="top" width="357">
<p style="" align="center"><strong><font
color="#990000" face="Arial, Helvetica, sans-serif"
size="2"><span
style="font-size: 10pt; font-family: Arial; color: blue"> <font
color="#000066">Variaciones</font></span></font></strong></p>
</td>
</tr>
<tr>
<td class="Normal" style="width: 116px;"
height="22" valign="top">
<div align="center"></div>
</td>
<td class="Normal" bgcolor="#ffffcc"
height="22" valign="top" width="90">
<p style="" align="center"><strong><font
color="#000066" face="Arial, Helvetica, sans-serif"
size="2"><span
style="font-size: 10pt; font-family: Arial; color: blue">Indice</span></font></strong></p>
</td>
<td class="Normal" bgcolor="#ffffcc"
height="22" valign="top" width="357">
<p style="" align="center"><strong><font
color="#000066" face="Arial, Helvetica, sans-serif"
size="2"><span
style="font-size: 10pt; font-family: Arial; color: blue">Mensual</span></font></strong></p>
</td>
<td class="Normal" bgcolor="#ffffcc"
height="22" valign="top" width="357">
<p style="" align="center"><strong><font
face="Arial, Helvetica, sans-serif" size="2">
<span
style="font-size: 10pt; font-family: Arial; color: blue">Acum.
del Año</span></font></strong></p>
</td>
This happens because some TD tags have P tags inside them. Use span instead.
Do this:
<tr>
<td class="Normal" style="width: 116px;" height="13" valign="top">
<span style="" align="center"><strong style="font-weight: 400;"><font face="Arial, Helvetica, sans-serif" size="2">
<span style="font-family: Arial;">31/01/<a name="2009">2009</a></span></font></strong></span>
</tr>
Instead of:
<tr>
<td class="Normal" style="width: 116px;" height="13" valign="top">
<p style="" align="center"><strong style="font-weight: 400;"><font face="Arial, Helvetica, sans-serif" size="2">
<span style="font-family: Arial;">31/01/<a name="2009">2009</a></span></font></strong></p>
</td>
</tr>
The reason why the row with 28/02/2009 and the rows below that are higher is very simple:
in the rows above 28/02/2009, the first table cell has no <p> element;
in the row with 28/02/2009 and those below it, the first table cell has a <p> element.
I assume that the HTML code was created in a WYSIWYG editor; that would explain why it is so bloated. The code can be made much smaller by removing all direct formatting from the HTML code and replacing it with CSS style rules. By direct formatting, I mean things like
align="center" height="1" valign="top" width="90" on the <td> elements,
style="font-weight: 400;" on the <strong> elements inside the <td> elements,
the entire <span style="font-size: 8.5pt; font-family: Tahoma;">...</span> elements,
the entire <font face="Arial" size="2">...</font> elements (except for their content, obviously).
You would then end up with something like the following:
<tr>
<th>28/02/2009</th>
<td>113,59</td>
<td>0,57</td>
<td>6,81</td>
<td>14,56</td>
</tr>
Then, you need to make up your mind about the font face, the font size, etc., because some of the direct formatting was contradictory (Tahoma on the span elements, Arial on font elements, ...) and create CSS rules for the table.
I would just use css to set the height of the tr elements:
tr {
height: 40px; /* or whatever else */
}
EDIT: you can also try setting the height of td:
td {
height: 40px;
}
i wrote email signature for Outlook and Thunderbird. My problem is in signature and space line between "Digital Print" and "Bo Kalako! s.r.o.".
Email from Thunderbird with space <br /><p></p> dosent work and text is without space in line. Pleas give mi tip or help. Many thanks!
http://jsfiddle.net/k2hzw78y/
or
<font style="font-family:'Arial', sans-serif; font-size: 10pt; color:#333;">S pozdravem</font><br><br><br>
<font style="font-family:'Arial', sans-serif; font-size: 10pt; color:#333;">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="270" rowspan="2" style="border-right: 1px solid #333333;"><img src="http://www.caj.jecool.net/wp-content/uploads/2015/11/Logo_Testorange.png" width="253" height="78" border="0"></td><td width="15"></td>
<td colspan="6"><font style="font-weight:bolder; color:FF6600; font-size:11pt;">Karel Holina</font><br /><font style="color:FF6600D; font-size:10pt; font-weight:;">Digital Print</font>
<br /><p></p>
<font style="color:#1F497D; font-size:10pt;">Bo Kalako! s.r.o.<br> <font style="color:#333;font-weight:; font-size:10pt;">adress: Komen 601/13, 500 02 Big City
</a><br> <br<font style="color:#333;font-weight:; font-size:10pt;">mobil: +490 623 980 130</a><br><font style="color:#333;font-weight:; font-size:10pt;">e-mail: john.lou#bo-kalako.com</a><br> www.bo-kalako.com</font>
</td>
</tr>
<tr>
<td width="8"></td>
</table></font>
What if you put two BR instead of one BR and one paragraph?
<font style="font-family:'Arial', sans-serif; font-size: 10pt; color:#333;">S pozdravem</font><br><br><br>
<font style="font-family:'Arial', sans-serif; font-size: 10pt; color:#333;">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="270" rowspan="2" style="border-right: 1px solid #333333;"><img src="http://www.caj.jecool.net/wp-content/uploads/2015/11/Logo_Testorange.png" width="253" height="78" border="0"></td><td width="15"></td>
<td colspan="6"><font style="font-weight:bolder; color:FF6600; font-size:11pt;">Karel Holina</font><br /><font style="color:FF6600D; font-size:10pt; font-weight:;">Digital Print</font>
<br /><br />
<font style="color:#1F497D; font-size:10pt;">Bo Kalako! s.r.o.<br> <font style="color:#333;font-weight:; font-size:10pt;">adress: Komen 601/13, 500 02 Big City
</a><br> <br><font style="color:#333;font-weight:; font-size:10pt;">mobil: +490 623 980 130</a><br><font style="color:#333;font-weight:; font-size:10pt;">e-mail: john.lou#bo-kalako.com</a><br> www.bo-kalako.com</font>
</td>
</tr>
<tr>
<td width="8"></td>
</table></font>
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.