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>
Related
I have a banner image added to the notification and dimension i set and Width: 100% & height: auto which is working fine in Mobile, Gmail but not working properly in Outlook.
My sample code:
<p> </p>
<p><img style="align: baseline;" title="" src="sampleimage.jpgx" alt="" width="100%" height="auto" align="baseline" border="" hspace="" vspace="" /></p>
<p> </p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p> </p>
<p>Your request is submitted (${number}).</p>
<p> </p>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><strong>Title</strong></td>
</tr>
<tr>
<td style="color: black;" colspan="5">${short_description}</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><strong>Submitted by</strong></td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><strong>Approver</strong></td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><strong>Department</strong></td>
</tr>
<tr>
<td style="color: black;" colspan="3">${submitter}</td>
<td style="color: black;" colspan="1">${u_project_manager}</td>
<td style="color: black;" colspan="1"><span style="font-family: museo-sans, sans-serif;">${department}</span> </td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><strong>Business case </strong></td>
</tr>
<tr>
<td style="color: black;" colspan="5">
<p>${business_case}</p>
<p> </p>
</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-size: 10pt;"><span style="font-family: 'Montserrat', sans-serif;">Thank you,</span><br /></span></p>
<p> Service Desk</p>
<p> </p>
I want to resize the banner image size, if i set the width & height with some values the image quality is getting disturbed and getting different outputs in different systems majorly on IOS & Outlook
I'm trying to create a clickable HTML table that doesn't make the text appear hyperlinked -- and that makes the entire table linked. After spending hours sifting through the previous posts on this topic, I thought I had figured the code out and got it to work in an HTML editor.
However, when I send myself test email samples, the code is not working. In Outlook, the table appears clickable but is not linked. In Gmail, it doesn't appear clickable and is not linked.
A very helpful commenter let me know that I can't have an <a> tag outside the table, but if I move the <a> tag to inside the <td> then it will only link the text, not the whole table.
Is there a workaround for this?
Here is my code:
<a href="http://google.com" style="text-decoration:none">
<table align="center" border="1" cellpadding="10" cellspacing="0" style="width:200px;">
<tbody>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
</tr>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
</tr>
</tbody>
</table>
</a>
Thanks so much in advance
Add a style color: inherit;in your <a> tag. It should looks like this:
<a href="http://google.com" style="text-decoration:none;color:inherit">
<a href="http://google.com" style="text-decoration:none;color:inherit">
<table align="center" border="1" cellpadding="10" cellspacing="0" style="width:200px;">
<tbody>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
</tr>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
</tr>
</tbody>
</table>
</a>
As seen in the green circle. Any ideas as to why this would be happening?
Here is my code:
<table style="margin-top:40px;margin-left:0px;margin-bottom:30px;width:95%" border="0">
<tr height="45">
<td width="105">
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:15px;color:#333;line-height:15px"><b style="font-weight: bold;">CONCUR </b><b style="color:#DE2C38; font-weight:normal;">LABS</b>
</td>
<td>
<div style="height:45px; width:1px; background:#888; margin-right: 2px;"> </div>
</td>
<td>
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:12px;color:#333;line-height:15px"><b style="font-weight: bold;">Alicia</b>, Sr User Experience Designer<br />
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:12px;color:#333;line-height:22px">123.456.7891</b> <b style="color:E9212D;">|</b> alicia#website.com</span>
</td>
</tr>
</table>
Your html have some messy tags, the first <span> not being properly closed in particular.
<table style="margin-top:40px;margin-left:0px;margin-bottom:30px;width:95%" border="0">
<tr height="45">
<td width="105">
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:15px;color:#333;line-height:15px"><b style="font-weight: bold;">CONCUR </b><b style="color:#DE2C38; font-weight:normal;">LABS</b></span>
</td>
<td>
<div style="height:45px; width:1px; background:#888; margin-right: 2px;"> </div>
</td>
<td>
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:12px;color:#333;line-height:15px"><b style="font-weight: bold;">Alicia</b>, Sr User Experience Designer<br />
<span style="font-family:'Calibri',helvetica,San-Serif;font-size:12px;color:#333;line-height:22px">123.456.7891 <b style="color:E9212D;">|</b> alicia#website.com</span>
</td>
</tr>
</table>
There was an un-opened </b> tag and a horrible title:"Call me" I corrected too. :p
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've created an email template and this email gets sent to outlook 2010 from my application(Oracle UCM).Issue is my workflow history table (code below) gets distorted and moves to left when checked on any mobile device However the entire email looks good when seen on a desktop.
<table border="1"cellspacing=0 cellpadding=0 width="95%" align="center">
<tr>
<td align="center" colspan="2" style='width:10.0%; background:#A5CEF7'>
<p><span style='font-size:18.0pt;font-family:"Calibri","sans-serif";color:red'>DMS</span><span style='font-size:15.0pt;font-family:"Calibri","sans-serif";color:red'> - <$xSubDocType$> document for <$xClientName$> PID: <$xProject_ID$> is in your workflow </span></p>
</td>
</tr>
<tr>
<td align="left" colspan="2" style='width:10.0%;font-family:"Calibri","sans-serif";background:#A5CEF7;font-size:12.0pt'>
<p>
<b>
Click on Approve or
Reject to take action on this document through email.Please remove your signatures(if any)</b><br><br>
</span>
<span style='font-size:10.0pt;font-family:"Calibri","sans-serif";color:red;align="center"'>** Please note: Do not make any changes</span>
</p>
</td>
</tr>
<tr>
<td rowspan="2" width="40%";height="1000" style='background:#E6E6D8;min-width:200px'>
<p style="padding-left:10px">
<span style='font-size:12pt;font-family:Calibri,sans-serif;color:black;font-weight:bold;left:500px'>
<b><u>Content Info</u> </b></span><br>
<br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Content ID: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$dDocName$></span><br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Document Owner: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$UserFullName$></span><br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Client: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$xClientName$></span><br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Project Name </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$xProjectName$></span><br>
</p>
<p style="font-family:Calibri,sans-serif;font-size:10pt;padding-left:15px">
<$if IsNotifyOnly or wfAction like "APPROVE"$>
[ <a href="<$HttpCgiPath$>?IdcService=DOC_INFO&idcToken=<$idcToken$>&dID=<$dID$>&dDocName=<$url(dDocName)$>&Auth=Intranet" style="color:993333;width:300px;font-family:Calibri,sans-serif;font-weight:normal">
<$lc("wwDocumentInfo")$></a> ]</p>
<$else$>
[ <a href="<$HttpCgiPath$>?IdcService=REVIEW_WORKFLOW_DOC&idcToken=<$idcToken$>&dDocName=<$url(dDocName)$>&Auth=Intranet" style="color:993333;width:300px;font-family:Calibri,sans-serif;font-weight:normal">
<$lc("wwWfReviewWorkflowItem")$></a> ]</p>
<$endif$>
</td>
</tr>
<tr>
<td align ="center" vertical-align="top" width="60%" style='background:#E6E6D8;min-width:600px'>
<p style="padding-left:10px">
<!-- <td align ="center" vertical-align="top" width="60%" bgcolor="#E6E6D8"> -->
<div style="display:none">
<$executeService("GET_SENDTOWORKFLOW_HISTORY_EMAIL_DETAILS")$>
<$numrowSTOWFH = rsNumRows("SendtoWorkflowActionHistory")$>
<$executeService("GET_WORKFLOW_HISTORY_EMAIL_DETAILS")$>
<$numrowWFH = rsNumRows("WorkflowActionHistory")$>
<$if numrowWFH gt 0$>
<$rsRename("WorkflowActionHistory", "rsNewName")$>
<$else$>
<$rsRename("SendtoWorkflowActionHistory", "rsNewName")$>
<$endif$>
</div>
<span style="font-family:Calibri,sans-serif;font-size:12pt">
<b>Reason: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:12pt;color:blue">
<b><$if xPurposeForSubmission$><$getFieldViewValue("xPurposeForSubmission",xPurposeForSubmission,"Reason")$><$endif$></span></b><br><br>
<table style="position:absolute;width:97.0%;left:145px" cellpadding="3" cellspacing="0" id="Table2">
<tr>
<td style="font-family:Calibri,sans-serif;font-size:12pt" colspan="7">
<b>Recent workflow history (Maximum Last 5)</b>
</td>
</tr>
<tr>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:130px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action Date</b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:140px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action By </b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:70px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action </b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:150px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action Type </b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:250;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Comments</b></span></div>
</td>
</tr>
<$loop rsNewName$>
<tr>
<!-- ACTION DATE cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:130px;height:1px;">
<div class="xuiListCellDivCenter" nowrap><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$dActionDate$> </span></div>
</td>
<!--Send To cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:100px;height:1px;">
<div class="xuiListCellDivCenter" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$if strLength(getValueForSpecifiedUser(xWF_SendTo, "dFullName")) gt 0 $>
<$getValueForSpecifiedUser(xWF_SendTo, "dFullName")$>
<$else$>
<$xWF_SendTo$>
<$endif$> </span></div>
</td>
<!-- ACTION cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:70px;height:1px;">
<div class="xuiListCellDivCenter" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$dAction$> </span></div>
</td>
<!-- Approval Type cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:150px;height:1px;">
<div class="xuiListCellDiv" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal"><$ApprovalType$> </span></div>
</td>
<!-- Comments cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:250px;height:1px;">
<div class="xuiListCellDiv" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal"><$strSubstring(xWorkflowComments,0,100)$> </span> </div>
</td>
</tr>
<$endloop$>
<tr>
<td colspan="2">
[<a href="<$HttpCgiPath$>?IdcService=GET_WORKFLOW_HISTORY_BYNAME&idcToken=<$idcToken$>&dID=<$url(dID)$>&dDocName=<$url(dDocName)$>" style="color:993333;width:50px;font-size:10pt;font-family:Calibri,sans-serif;font-weight:normal">
<$lc("View detailed workflow history")$></a>]
</td>
</tr>
</table>
</td>
</tr>
</table>
position:absolute; set at line 80 caused the table to take a fixed position and hence the issue.
also height="1000" set further set the column's height.Removed it and I'm happy now
Please remove rowspan="2" from below td, There should not be rowspan.
HTML
<td rowspan="2" width="40%" ;height="1000" style="background:#E6E6D8;min-width:200px">