I have some design requirements for an email template where I have two "challenges":
two columns need to flip to one column
some visible border lines need to be switched from vertical to horizontal
The following shows how it should look (2 columns on the left for desktop, 1 column on the right for mobile):
The whole email is based on responsive tables and the two-column part is implemented as follows right now:
<table cellpadding="5" cellspacing="0"
style="background-color:#F6F6F6; font-size: 14px; color:#58595b; width:100%; border-collapse:collapse;">
<tr><td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;"> </td></tr>
<tr>
<td valign="top" style="border-right: 1.5px solid; border-color: #d0d0d0; padding-right:40px; text-align:right; width:42%; vertical-align:top;">
Start point
</td>
<td valign="top" style="padding-left:40px; vertical-align:top;">
<strong>Fri, January 12, 2023 12:00</strong>
<br />
Harbour, Seatown
</td>
</tr>
<tr><td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;"> </td></tr>
<tr>
<td valign="top" style="border-right: 1.5px solid; border-color: #d0d0d0; padding-right:40px; text-align:right; width:42%; vertical-align:top;">
End point
</td>
<td valign="top" style="padding-left:40px; vertical-align:top;">
<strong>So, January 18, 2023 10:00</strong>
<br />
Central Station, Capital
</td>
</tr>
<tr><td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;"> </td></tr>
</table>
I tried the approach with having a left and a right table (explained here) but the problem is that I do not use fixed widths.
How could I achieve the required design with a responsive mail template?
You will need to use the technique as outlined in the link, but if you want to use percentages instead of fixed widths, then use width="50%".
This is because the technique works on the basic fundamentals of HTML, that if a block doesn't fit in the space available, it will automatically shift underneath.
So to enable the stacking without a fixed pixel width, you will need to add a #media query to force the stacking (otherwise it would not stack).
e.g.
#media (max-width: 620px)
.table-left,.table-right {
width: 100% !important;
}
(The article you link to is a bit outdated: don't use [class=...], just write it out normally. Gmail may strip the entire <style> section if it doesn't like something in it, and this is one of those things it doesn't like.)
I prefer an override (max-width, and !important) because you want everything possible inline, and only to use embedded styles where strictly necessary.
But that's also why it's best to use a fixed pixel width, because some email clients do not respect your embedded styles (styles in the <head>). GANGA emails (one form of Gmail account) fall into this category. Those email clients would not stack even though they may need to, if you fully rely on the #media query for the stacking.
To override the border, put a style on the <td>, and reference it in the #media query, e.g.
#media (max-width: 620px)
.border {
border-right:none!important;
}
.border-top {
border-bottom:1.5px solid #d0d0d0 !important;
}
As one doesn't have the same border structure (they don't both need border-bottom), one of the <td>s will need a different class. Here, I'm expecting the first one, i.e. <td class="border border-top">.
In my Angular8 app, I have a drop zone where I can drag & drop files, such as PDF, MS Word, CSV, etc. I am using the technique found on this blog, but also documented by Mozilla MDN. The code works very well, but the one important thing I can't figure out is how to capture the file bytes being uploaded, so that I can save them to the database.
I placed a screenshot of the Opera browser source debugger below, showing the typescript and resulting fileObj and blobObj values. The debugger complains about readAsBinaryString(blobObj), saying that blobObj is not a Blob. Looking at the blobObj value, I can see it's not a Blob that I've seen before. And, looking at all the values, none stand-out to me as a Blob. Also, the file bytes aren't obvious either. Looking at the html, below, I can't think of a change that would reveal the bytes.
I'm hoping someone with drag and drop experience can explain how it's done.
Thanks!
Debugger Screenshot
HTML
<table class="table table-striped table-forum">
<tbody>
<tr>
<td>
<div class="container" style="float: left; padding-top: 10px; padding-left: 10px;" appDnd (fileDropped)="onFileDropped($event)" (itemDropped)="onItemDropped($event)">
<input type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
<img src="assets/img/dnd/ic-upload-file.svg" alt="">
<h3>Drag and drop file here</h3>
<h3>or</h3>
<label for="fileDropRef" style="font-size: 14px; font-weight: 600; height: 25px; padding: 5px 5px;">Browse for File</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="files-list" style="width: 35%;">
<div class="single-file" *ngFor="let file of files; let i = index">
<img src="assets/img/dnd/ic-file.svg" width="45px" alt="file">
<div class="info">
<h4 class="name">
{{ file?.name }}
</h4>
<p class="size">
{{ formatBytes(file) }}
</p>
<app-progress [progress]="file?.progress" style="width: 200px;"></app-progress>
</div>
<img src="assets/img/dnd/ic-delete-file.svg" class="delete" width="20px" alt="file" (click)="deleteFile(i)">
</div>
</div>
</td>
</tr>
</tbody>
</table>
const reader = new FileReader();
// FileReader has an onload event that you handle when it has loaded data
reader.onload = (e: any) => {
const data = e.target.result as any;
console.log({type: 'GalleryComponent prepareFilesList - data:', data});
};
// this will kick off the onload handler above
reader.readAsDataURL(file);
As soon as I started coding responsive emails, I noticed that contiguous images (all with the same original height) in a HTML table row didn't always remain the same height when being responsively scaled. That's a big problem for me because the email layouts that I am working on are image heavy and have to be tightly aligned. Uneven height images break the layout. I eventually came up with the solution presented here: http://am-samples.gear.host/iPhone5S-iO7-issue.html
Navigate to that URL and resize the browser to see the responsive scaling in action.
Here are the main snippets in case you can't navigate to the URL above:
Table that has the contiguous images
<table class="100p" width="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#7fff00" style="background-color: #7fff00;">
<tr>
<td class="100p" align="center" width="100%" valign="top">
<div>
<table class="100p" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="100p" width="100%" align="left" valign="top">
<span width="26.09375%" style="width: 26.09375%; display: inline-block;">
<img id="ourStory" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-our-story.png" border="0" style="display: block;" />
</span><span width="19.6875%" style="width: 19.6875%; display: inline-block;">
<img id="recipes" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-recipes.png" border="0" style="display: block;" />
</span><span width="25.15625%" style="width: 25.15625%; display: inline-block;">
<img id="seafood" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-seafood.png" border="0" style="display: block;" />
</span><span width="29.0625%" style="width: 29.0625%; display: inline-block;">
<img id="giftCards" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-giftcards.png" border="0" style="display: block;" />
</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
CSS classes referenced
.responsiveImage {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border: none;
}
*[class="100p"] {
width: 100% !important;
height: auto !important;
}
I've stripped the code down to the essentials just to clearly present the issue. If you take a look at the source code, you'll see that the top and bottom black strips are just tables with a black background color. The red strip is actually made up of contiguous images. The original height of all the images is the same. Because of that I expected the height of all the images to scale equally. The table that contains the images has a background color of florescent green. That way, in Litmus, it is easy to see if the height of any of the images is different.
I've tested this solution in Litmus and it works fine on the email clients that I am interested in except two: iPhone 5S (iOS7 and iOS8). Here is a screenshot of the result in iPhone 5S and iOS7 (iOS 8 produces a similar result) : http://am-samples.gear.host/images/iPhone5S-iOS7-issue.jpg
So the problem is that when scaling, sometimes the image heights are not all equal. Any ideas on how to fix this on the iPhone 5S?
Different widths with the same height makes the images a different scale, which means that as they shrink through the 100% w x auto h, they will differ in height.
To retain consistent height/width through mobile I would make sure that the scale is identical. E.g. make all images 100px x 50px. (you can use percents here if you wish too)
The only other option I can really offer from what I see is a defined height to force each to that amount, but in HTML email, this is not likely to be followed by the email clients processors.
I am creating an email template to use in Pardot. I have coded the email up. It works fine in OSX Mail, Outlook 07 +, Opera Mail, however GMail is being a real pain. It is adding some weird height or something to the tr or td in my table.
Any suggestions?
<table border="0" cellpadding="0" cellspacing="0" width="228">
<tbody>
<tr valign="bottom">
<td valign="bottom"><span pardot-region=""><img src="widget_top.jpg" alt="Placeholder"></span></td>
</tr>
<tr bgcolor="#ffd13f">
<td style="padding: 10px;">
<h2><span pardot-region="">Subheading span across one or two lines for best practice:</span></h2>
<span pardot-region=""><p><b>Date:</b> Thursday 29 November</p>
<p><b>Time:</b> 1.30pm (GMT)</p>
<p><b>Where:</b> Register online ></p>
<p><b>Topic:</b> Dynamic performance management</p>
<p><b>Presenters:</b> Octavius Black, CEO and Sebastian Bailey, President</p></span>
</td>
</tr>
<tr valign="top">
<td valign="top"><span pardot-region=""><img src="widget_bottom.jpg" alt="Placeholder"></span></td>
</tr>
</tbody>
</table>
(this table is inside a set of tested tables).
Screen shot can be found here: http://i45.tinypic.com/15wzda9.png
Cheers :)
On the images you have to put (inline)
style="display:block;"
:)
display:block; is definitely needed. You probably should zero out everything in all img tags, and set width and heights also.
<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="600" height="150"
alt="">
Also, you don't need the spans inside the table cells. If you want to keep them, make sure they have margin and padding zero'd out there too.
I'm working on sending out an html based email, and every time it sends the image src tags and some of the anchor href tags are modified to be relative url's.
Update 2: This is happening between when the body of the email is generated and sent and when it arrives in my inbox.
Update: I am using Postfix on a LAMPP server. In addition, I am using Zend_Mail to send the emails out.
For example, I have a link:
src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/header.jpg"
And it gets rewritten as:
src="../../../../images/email/highpoint_2009_04/header.jpg"
What can cause this to occur and how is it corrected?
Email headers:
Return-Path: <root#example.com>
X-Original-To: gabe#example.com
Delivered-To: gabe#example.com
Received: by mail.example.com (Postfix, from userid 0)
id 6BF012252; Tue, 14 Apr 2009 12:15:20 -0600 (MDT)
To: Gabriel <gabe#example.com>
Subject: Free Map to Sales Success
From: Somebody <info#example.com>
Date: Tue, 14 Apr 2009 12:15:20 -0600
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: multipart/related
Content-Disposition: inline
Message-Id: <20090414181520.6BF012252#mail.example.com>
Original content to be sent out:
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td valign="top">
<a href="http://www.furnituretrainingcompany.com">
<img moz-do-not-send="true" alt="The Furniture Training Company - Know More. Sell More." src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/header.jpg" border="0" height="123" width="600">
</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="600">
<tbody>
<tr>
<td valign="top"><img alt="Visit us at High Point to receive your free training poster" src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/hero.jpg" moz-do-not-send="true" height="150" width="600"><br>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="600">
<tbody>
<tr>
<td bgcolor="#ffffff" valign="top"><img alt="" src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/spacer_content_left.jpg" moz-do-not-send="true" height="30" width="30"><br>
</td>
<td bgcolor="#ffffff" valign="top"><font originaltag="yes" style="font-size: 9px; font-family: Verdana,Arial,Helvetica,sans-serif;" color="#000000" face="Verdana, Arial, Helvetica, sans-serif" size="1"><big><big><big><big><small><big><b>See you at Market</b></big><br>
</small></big></big></big></big></font>
<font originaltag="yes" style="font-size: 9px; font-family: Verdana,Arial,Helvetica,sans-serif;" color="#000000" face="Verdana, Arial, Helvetica, sans-serif" size="1"><big><big><big><big><small><br>
</small></big></big></big></big></font><small><font
face="Helvetica, Arial, sans-serif">Visit our space to get your free
Map to Sales Success poster! This unique 24 X 36 color poster is your
guide to developing high volume salespeople with larger tickets. Find
us in the new NHFA Retailer Resource Center located in the Plaza. <br>
<br>
Don’t miss Mark Lacy’s entertaining seminar "Help Wanted! My Sales
Associates Can’t Sell Water to a Thirsty Camel." He’ll reveal powerful
secrets for turning sales associates into furniture experts that will
sell. See him Saturday, April 25th at 11:30 AM in the seminar room of
the
new NHFA Retail Resource Center in the Plaza. <br>
<br>
Stop by our space to learn how our ingenious internet-delivered
training courses are easy to use, guaranteed to work, and cheaper than
the daily donuts. Over 95% report increased sales. <br>
<br>
Plan to see us at High Point. </font></small>
<font originaltag="yes" style="font-size: 9px; font-family: Verdana,Arial,Helvetica,sans-serif;" color="#000000" face="Verdana, Arial, Helvetica, sans-serif" size="1"><big><big><big><big><small><small><br>
<br>
<br>
<br>
</small></small></big></big></big></big></font><small><font
originaltag="yes"
style="font-size: 9px; font-family: Verdana,Arial,Helvetica,sans-serif;"
color="#000000" face="Verdana, Arial, Helvetica, sans-serif" size="1"><big><big><big><small>
</small></big></big></big></font></small>
<img alt="Find out more" src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/image_content_left.jpg" moz-do-not-send="true" border="0" height="67" width="326"><br>
<br>
</td>
<td bgcolor="#ffffff" valign="top">
<img alt="" src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/spacer_content_middle.jpg" moz-do-not-send="true" height="28" width="28"><br>
</td>
<td bgcolor="#ffffff" valign="top"><img alt="Roadmap to Sales Success poster" src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/image_content_right.jpg" moz-do-not-send="true" height="267" width="186"><br>
<font face="Helvetica, Arial, sans-serif"><small><font originaltag="yes" style="font-size: 9px; font-family: Verdana,Arial,Helvetica,sans-serif;" color="#000000" size="1"><big><big><big><small><b>Road
Map to Sales Success<br>
</b><br>
</small></big></big></big></font>This beautiful poster is yours
free for simply stopping by and visiting with us at High Point. <span
class="moz-txt-slash">Our space is located inside the </span>new NHFA
Retailer Resource Center in the Plaza Suites, 222 South Main St, 1st
Floor. We will be at market from Sat April 25th until Thur
April 30th. </small></font><br>
</td>
<td bgcolor="#ffffff" valign="top"><img alt="" src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/spacer_content_right.jpg"
moz-do-not-send="true" height="30" width="30"><br>
<br>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="600">
<tbody>
<tr>
<td bgcolor="#ffffff" valign="top"><img alt="" src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/disclaimer_divider.jpg"
moz-do-not-send="true" height="25" width="600"><br>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="600">
<tbody>
<tr>
<td bgcolor="#ffffff" valign="top"><img alt="" src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/spacer_disclaimer_left.jpg"
moz-do-not-send="true"></td>
<td bgcolor="#ffffff" valign="top"><img alt="" src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/spacer_disclaimer_middle.jpg"
moz-do-not-send="true"><br>
<font originaltag="yes"
style="font-size: 9px; font-family: Verdana,Arial,Helvetica,sans-serif;"
color="#666666" face="Verdana, Arial, Helvetica, sans-serif" size="1"><big><big><big><big><small><small><small>If
you are not attending the High Point market in April but
would still like to receive a free Road Map to Sales Success poster
visit us on the web at <u><a moz-do-not-send="true"
class="moz-txt-link-abbreviated"
href="http://www.furnituretrainingcompany.com">www.furnituretrainingcompany.com</a></u>,
or to
speak with a Furniture Training Company representative, call toll free
(866) 755-5996. We do not offer free shipping outside of the U.S. and
Canada. Retailers outside of the U.S. and Canada may call for more
information. Limit one free Road Map to Sales Success per company.
Other copies of the poster may be purchased on our web site.<br>
<br>
</small></small></small></big></big></big></big></font> <font
color="#666666"><small><font originaltag="yes"
style="font-size: 9px; font-family: Verdana,Arial,Helvetica,sans-serif;"
face="Verdana, Arial, Helvetica, sans-serif" size="1"><big><big><big><small><small>We
hope you found this message to be useful. However, if you'd
rather not receive future emails of this sort from The Furniture
Training Company, please <a moz-do-not-send="true"
href="http://www.furnituretraining.com/contact">click here to
unsubscribe</a>.<br>
<br>
</small></small></big></big></big></font></small><small><font
originaltag="yes"
style="font-size: 9px; font-family: Verdana,Arial,Helvetica,sans-serif;"
face="Verdana, Arial, Helvetica, sans-serif" size="1"><big><big><big><small><small>©Copyright
2009 The Furniture Training Company.<br>
1770 North Research Park
Way, <br>
North Logan, UT 84341. <br>
All Rights Reserved.</small></small></big></big></big></font></small></font><br>
</td>
<td bgcolor="#ffffff" valign="top"><img alt=""
src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/spacer_disclaimer_right.jpg"
moz-do-not-send="true"></td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="600">
<tbody>
<tr>
<td bgcolor="#ffffff" valign="top"><img alt=""
src="http://www.furnituretrainingcompany.com/images/email/highpoint_2009_04/footer.jpg"
moz-do-not-send="true"> </td>
</tr>
</tbody>
</table>
<br>
<br>
Content that gets sent:
<table border=3D"0" cellspacing=3D"0" cellpadding=3D"0" width=3D"600" al=
ign=3D"center">=0D=0A<tbody>=0D=0A<tr>=0D=0A<td valign=3D"top"><a href=
=3D"http://www.furnituretrainingcompany.com"> <img src=3D"http://www.fur=
nituretrainingcompany.com/images/email/highpoint_2009_04/header.jpg" bor=
der=3D"0" alt=3D"The Furniture Training Company - Know More. Sell More."=
width=3D"600" height=3D"123" /> </a></td>=0D=0A</tr>=0D=0A</tbody>=0D=
=0A</table>=0D=0A<table border=3D"0" cellspacing=3D"0" cellpadding=3D"0"=
width=3D"600" align=3D"center">=0D=0A<tbody>=0D=0A<tr>=0D=0A<td valign=
=3D"top"><img src=3D"http://www.furnituretrainingcompany.com/images/emai=
l/highpoint_2009_04/hero.jpg" alt=3D"Visit us at High Point to receive y=
our free training poster" width=3D"600" height=3D"150" /><br /></td>=0D=
=0A</tr>=0D=0A</tbody>=0D=0A</table>=0D=0A<table border=3D"0" cellspacin=
g=3D"0" cellpadding=3D"0" width=3D"600" align=3D"center">=0D=0A<tbody>=
=0D=0A<tr>=0D=0A<td valign=3D"top" bgcolor=3D"#ffffff"><img src=3D"http:=
//www.furnituretrainingcompany.com/images/email/highpoint_2009_04/spacer=
_content_left.jpg" alt=3D"" width=3D"30" height=3D"30" /><br /></td>=0D=
=0A<td valign=3D"top" bgcolor=3D"#ffffff"><span style=3D"font-size: xx-s=
mall; font-family: Verdana,Arial,Helvetica,sans-serif; color: #000000;">=
<big><big><big><big><small><big><strong>See you at Market</strong></big>=
<br /> </small></big></big></big></big></span> <span style=3D"font-size:=
xx-small; font-family: Verdana,Arial,Helvetica,sans-serif; color: #0000=
00;"><big><big><big><big><small><br /> </small></big></big></big></big><=
/span><small><span style=3D"font-family: Helvetica,Arial,sans-serif;">Vi=
sit our space to get your free Map to Sales Success poster! This unique=
24 X 36 color poster is your guide to developing high volume salespeopl=
e with larger tickets. Find us in the new NHFA Retailer Resource Center=
located in the Plaza. <br /> <br /> Don’t miss Mark Lacy’s=
entertaining seminar "Help Wanted! My Sales Associates Can’t Sell=
Water to a Thirsty Camel." He’ll reveal powerful secrets for turn=
ing sales associates into furniture experts that will sell. See him Satu=
rday, April 25th at 11:30 AM in the seminar room of the new NHFA Retail=
Resource Center in the Plaza. <br /> <br /> Stop by our space to learn=
how our ingenious internet-delivered training courses are easy to use,=
guaranteed to work, and cheaper than the daily donuts. Over 95% report=
increased sales. <br /> <br /> Plan to see us at High Point. </span></s=
mall> <span style=3D"font-size: xx-small; font-family: Verdana,Arial,Hel=
vetica,sans-serif; color: #000000;"><big><big><big><big><small><small><b=
r /> <br /> <br /> <br /> </small></small></big></big></big></big></span=
><small><span style=3D"font-size: xx-small; font-family: Verdana,Arial,H=
elvetica,sans-serif; color: #000000;"><big><big><big><small> </small></b=
ig></big></big></span></small> <a href=3D"http://www.furnituretrainingco=
mpany.com/map"><img src=3D"http://www.furnituretrainingcompany.com/image=
s/email/highpoint_2009_04/image_content_left.jpg" border=3D"0" alt=3D"Fi=
nd out more" width=3D"326" height=3D"67" /></a><br /> <br /></td>=0D=0A<=
td valign=3D"top" bgcolor=3D"#ffffff"><img src=3D"http://www.furnituretr=
ainingcompany.com/images/email/highpoint_2009_04/spacer_content_middle.j=
pg" alt=3D"" width=3D"28" height=3D"28" /><br /></td>=0D=0A<td valign=3D=
"top" bgcolor=3D"#ffffff"><img src=3D"http://www.furnituretrainingcompan=
y.com/images/email/highpoint_2009_04/image_content_right.jpg" alt=3D"Roa=
dmap to Sales Success poster" width=3D"186" height=3D"267" /><br /> <spa=
n style=3D"font-family: Helvetica,Arial,sans-serif;"><small><span style=
=3D"font-size: xx-small; color: #000000;"><big><big><big><small><strong>=
Road Map to Sales Success<br /> </strong><br /> </small></big></big></bi=
g></span>This beautiful poster is yours free for simply stopping by and=
visiting with us at High Point. <span class=3D"moz-txt-slash">Our space=
is located inside the </span>new NHFA Retailer Resource Center in the P=
laza Suites, 222 South Main St, 1st Floor. We will be at market from Sat=
April 25th until Thur April 30th. </small></span><br /></td>=0D=0A<td v=
align=3D"top" bgcolor=3D"#ffffff"><img src=3D"http://www.furnituretraini=
ngcompany.com/images/email/highpoint_2009_04/spacer_content_right.jpg" a=
lt=3D"" width=3D"30" height=3D"30" /><br /> <br /></td>=0D=0A</tr>=0D=0A=
</tbody>=0D=0A</table>=0D=0A<table border=3D"0" cellspacing=3D"0" cellpa=
dding=3D"0" width=3D"600" align=3D"center">=0D=0A<tbody>=0D=0A<tr>=0D=0A=
<td valign=3D"top" bgcolor=3D"#ffffff"><img src=3D"http://www.furnituret=
rainingcompany.com/images/email/highpoint_2009_04/disclaimer_divider.jpg=
" alt=3D"" width=3D"600" height=3D"25" /><br /></td>=0D=0A</tr>=0D=0A</t=
body>=0D=0A</table>=0D=0A<table border=3D"0" cellspacing=3D"0" cellpaddi=
ng=3D"0" width=3D"600" align=3D"center">=0D=0A<tbody>=0D=0A<tr>=0D=0A<td=
valign=3D"top" bgcolor=3D"#ffffff"><img src=3D"http://www.furnituretrai=
ningcompany.com/images/email/highpoint_2009_04/spacer_disclaimer_left.jp=
g" alt=3D"" /></td>=0D=0A<td valign=3D"top" bgcolor=3D"#ffffff"><img src=
=3D"http://www.furnituretrainingcompany.com/images/email/highpoint_2009_=
04/spacer_disclaimer_middle.jpg" alt=3D"" /><br /> <span style=3D"font-s=
ize: xx-small; font-family: Verdana,Arial,Helvetica,sans-serif; color: #=
666666;"><big><big><big><big><small><small><small>If you are not attendi=
ng the High Point market in April but would still like to receive a free=
Road Map to Sales Success poster visit us on the web at <span style=3D"=
text-decoration: underline;"><a class=3D"moz-txt-link-abbreviated" href=
=3D"http://www.furnituretrainingcompany.com">www.furnituretrainingcompan=
y.com</a></span>, or to speak with a Furniture Training Company represen=
tative, call toll free (866) 755-5996. We do not offer free shipping out=
side of the U.S. and Canada. Retailers outside of the U.S. and Canada ma=
y call for more information. Limit one free Road Map to Sales Success pe=
r company. Other copies of the poster may be purchased on our web site.<=
br /> <br /> </small></small></small></big></big></big></big></span> <sp=
an style=3D"color: #666666;"><small><span style=3D"font-size: xx-small;=
font-family: Verdana,Arial,Helvetica,sans-serif;"><big><big><big><small=
><small>We hope you found this message to be useful. However, if you'd r=
ather not receive future emails of this sort from The Furniture Training=
Company, please <a href=3D"http://www.furnituretraining.com/contact">cl=
ick here to unsubscribe</a>.<br /> <br /> </small></small></big></big></=
big></span></small><small><span style=3D"font-size: xx-small; font-famil=
y: Verdana,Arial,Helvetica,sans-serif;"><big><big><big><small><small>&co=
py;Copyright 2009 The Furniture Training Company.<br /> 1770 North Resea=
rch Park Way, <br /> North Logan, UT 84341. <br /> All Rights Reserved.<=
/small></small></big></big></big></span></small></span><br /></td>=0D=0A=
<td valign=3D"top" bgcolor=3D"#ffffff"><img src=3D"http://www.furnituret=
rainingcompany.com/images/email/highpoint_2009_04/spacer_disclaimer_righ=
t.jpg" alt=3D"" /></td>=0D=0A</tr>=0D=0A</tbody>=0D=0A</table>=0D=0A<tab=
le border=3D"0" cellspacing=3D"0" cellpadding=3D"0" width=3D"600" align=
=3D"center">=0D=0A<tbody>=0D=0A<tr>=0D=0A<td valign=3D"top" bgcolor=3D"#=
ffffff"><img src=3D"http://www.furnituretrainingcompany.com/images/email=
/highpoint_2009_04/footer.jpg" alt=3D"" /></td>=0D=0A</tr>=0D=0A</tbody>=
=0D=0A</table>=0D=0A<p><br /></p><br><hr><a href=3D'http://localhost/ftc=
/app/unsubscribe.php?action=3DoptOut&pid=3D6121&cid=3D19&email=3Dmarkl#f=
urnituretrainingcompany.com'>Click to Unsubscribe</a>
As it turned out, even though when I copied and pasted the content into the application the necessary DOCTYPE, html, and body tags were in place, TinyMCE was stripping those tags. Which explains why the output only showed the content within the body tag.
I was able to fix the url rewrite problem by ensuring that the DOCTYPE, html and body tags were actually all in place.
And I fixed TinyMCE by adding in the fullpage plugin so that it no longer strips those tags from the input.
There is a configuration option "convert_urls" which can be set to false to prevent URLs from being converted too.
Since #Noah are sending expected content as email. Their is no problem with TinyMCE.
Normally images are blocked by mail hosters.
In my case, I was sending html content(with image) to gmail account. Google blockes images in mails.
Google display the following in every email
Images are not displayed. Display images below - Always display
images from xxxx#xxxx.com
Just click on appropriate link to display images.
Thank You,
Aashish