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">
Related
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>
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'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">
What we know is the width total of the table and the first column. The 3 and 4 column must adapt to the content, and the second column must use the rest of space. This second column must set the overflow hidden, allowing only one line or a line line
Maybe the fiddle is more clear
http://jsfiddle.net/favio41/9z867/
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
</colgroup>
<tbody>
<tr>
<td class="date">
<span class="month monthAndYear">Feb</span>
<br/>
<span class="day ng-binding">21</span>
</td>
<td style="background-image: url(resources/img/categories/G0400.png);" class="category_icon cat_G0400">
<span class="concepto ng-binding">This is a example of text</span>
</td>
<td>
<span data-tooltip="Internet, teléfono fijo" class="cat-label cat-tooltip onlyTitle">
<span class="text ng-binding">Internet</span>
<span class="arrow"></span>
</span>
</td>
<td class="importe">
<span class="importe_value ng-binding">-33,23</span>
</td>
</tr>
<tr>
<td class="date">
<span class="month monthAndYear">Feb</span>
<br />
<span class="day ng-binding">21</span>
</td>
<td style="background-image: url(resources/img/categories/G0400.png);" class="category_icon cat_G0400">
<span class="concepto ng-binding">This is a example of text, but this is really big and we want to be hidden the last part because if is too big ...</span>
<br/>
<span class="descripcion ng-binding">This is a example of description text</span>
</td>
<td>
<span data-tooltip="Internet, teléfono fijo" class="cat-label cat-tooltip onlyTitle">
<span class="text ng-binding">Internet</span>
<span class="arrow"></span>
</span>
</td>
<td class="importe">
<span class="importe_value ng-binding">-33,23</span>
</td>
</tr>
</tbody>
Put a DIV in the cell you want to have overflow. Set the dimensions and overflow for the DIV, not the TD.