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
Related
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>
I've been trying to make an HTML signature in apple mail, which seems to be working fine for me. However, when I get replies to my emails, I see that some email clients make the image extremely large. I thought I found the solution by specifying the dimensions multiple times, and it seemed to be working fine for a while, but now it has started again.
So my question is: how do I make sure the image remains the same size?
<!--start-->
<style type="text/css">a.link{margin:0;padding:0;border:none;text-decoration:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="format-detection" content="telephone=no">
<br/><br/> <!--line break-->
<!--image here-->
<table id="sig" width="320” cellspacing="0" cellpadding="0" border-spacing="0" style="width:320px;margin:0;padding:0;font-size: 12px;">
<tr> <!--indicates the row-->
<td valign="top" width="102" style="width:102px;margin:0;padding:0;">
<a href="website" title="My Name" style="border:none;text-decoration:none;">
<img moz-do-not-send="true"
src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Large_Scaled_Forest_Lizard.jpg"
alt="Random Image" width="102" height="102"
style="border:none;width:102px;height:102px;display:block">
</a>
</td>
<td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">
</td>
<!--here starts the text/names etc-->
<td style="margin:0;padding:0;">
<table id="sig2" cellspacing="0" cellpadding="0" border-spacing="0" style="padding:0;margin:0;font-family:'Lucida Grande',sans-serif;font-size:12px;line-height:10px;color:#000000;border-collapse:collapse;-webkit-text-size-adjust:none;">
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<strong>
<a href="mailto:MyEmail" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000">MyName
</span>
</a>
</strong>
<span style="color:#00277C">|
</span>
<a href="mailto:MyEmail" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000;font-style:italic">Function Title
</span>
</a>
</td>
</tr>
<tr>
<td height="5" style="height:5px;font-size:5px;mso-line-height-rule:exactly;line-height:5px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<a href="mailto:MyEmail" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000">hello#example.com
</span>
</a>
<span style="color:#00277C">|
</span>
<span style="color:#000000"> +1 23 45 67 89 23
</span>
</td>
</tr>
<tr>
<td height="8" style="height:8px;font-size:8px;mso-line-height-rule:exactly;line-height:8px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<strong>
<span style="color:#000000">CompanyName
</span>
</strong>
</td>
</tr>
<tr>
<td height="5" style="height:5px;font-size:5px;mso-line-height-rule:exactly;line-height:5px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<span style="color:#000000">Adress
</span>
<span style="color:#00277C">|
</span>
<span style="color:#000000"> ZipCode
</span>
</td>
</tr>
<tr>
<td height="5" style="height:5px;font-size:5px;mso-line-height-rule:exactly;line-height:5px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<a href="website" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000">www.example.com
</span>
<span style="color:#00277C">|
</span>
<span style="color:#000000"> +1 23 457 2462 35
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/> <!--line break-->
<!--end-->
I really hope someone can help me, thanks in advance!
have problem with email outlook signature of images which is scalling to bigger sizes, but only in MS outlook 2010.. in new versions everything is ok..
email signature html:
<table border="0" cellspacing="0" style="width: 470px; color: gray; font-family: arial;" width="470px" height="115px">
<tr>
<td width="120px">
<img alt="" src="https://wearemarketing.lt/fez/logo-lt_120d.png" style="margin-left: 4px;" width="120px" height="115px" alt="t" />
</td>
<td style="" width="320px">
<p>
<span class="name" style="font-size: 14pt;">
NAME SURNAME
</span>
<br>
<span class="position" style="font-size: 12pt;">
POSITION
</span>
<br />
</p>
<p style="font-size: 10pt;">
<span class="address">
ADDRESS
</span>
<br>
<span class="tels">
PHONE
</span>
<br>
<span class="mob">
ANOTHER PHOINE
</span>
<br/>
<br/>
</p>
</td>
</tr>
<tr>
<td colspan="2" width="470px">
<img alt="" src="https://wearemarketing.lt/fez/long-lt_470d.png" style="width: 470px;" width="470px" height="89px" alt="t" />
</td>
</tr>
</table>
and is it possible to use not .png, but .svg images?
It looks like you are confusing the formatting of table values for width and height with the way we code CSS values. They are different. In your code you added px to when defining heights with tables and images.
For <table>:
This is correct: width="200"
This is incorrect: width="200px"
I tested your code with a simple HTML wrapper with my fixes in Litmus and Outlook 2010 and the size now looks roughly the same. I didn't measure.
SVG Images:
Outlook, Android and Gmail do not work with SVG images. I suggest sticking with PNG.
Good Luck.
Working Outlook Footer:
<table border="0" cellspacing="0" style="width: 470px; color: gray; font-family: arial;" width="470" height="115">
<tr>
<td width="120">
<img alt="" src="https://wearemarketing.lt/fez/logo-lt_120d.png" style="margin-left: 4px;" width="120" height="115" alt="t" />
</td>
<td style="" width="320">
<p>
<span class="name" style="font-size: 14pt;">
NAME SURNAME
</span>
<br>
<span class="position" style="font-size: 12pt;">
POSITION
</span>
<br />
</p>
<p style="font-size: 10pt;">
<span class="address">
ADDRESS
</span>
<br>
<span class="tels">
PHONE
</span>
<br>
<span class="mob">
ANOTHER PHOINE
</span>
<br/>
<br/>
</p>
</td>
</tr>
<tr>
<td colspan="2" width="470">
<img alt="" src="https://wearemarketing.lt/fez/long-lt_470d.png" style="width: 470px;" width="470" height="89" alt="t" />
</td>
</tr>
</table>
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">
I'm having trouble aligning an image with text. The problem only occurs in outlook 03,07 & 10. See this picture to get a better understanding of my problem:
This is my code:
<td valign="middle" style="color:#fff; font-size:18px; padding-left:3%;" width="600" height="34" bgcolor="#1a292f">
<span class="nonmobile_content">
Onsdag
</span>
<span style="font-weight: bold">
21.03
</span>
<span style="color:#87bcd8;">
2013
</span>
<span style="color:#87bcd8;">
uke 11
</span>
<span>
<img src="retriever-logo-top.png" align="right">
</span>
</td>
<td bgcolor="#1a292f">
</td>
Is there a reason you're putting this all in one table cell rather than putting the image in a separate cell? You could simply:
<tr>
<td colspan="2">
Retriever (1), Cision (2), ...
</td>
</tr>
<tr>
<td ... >
<span class="nonmobile_content">
Onsdag
</span>
<span style="font-weight: bold">
21.03
</span>
<span style="color:#87bcd8;">
2013
</span>
<span style="color:#87bcd8;">
uke 11
</span>
</td>
<td>
<img src="retriever-logo-top.png" align="right">
</td>
</tr>
Then rather adding width to each individual td simply add it to the table:
<table width="600">