I have created a custom HTML email signature that renders fine in my Apple Mail client
but when bringing it into MS Outlook on a PC it renders with unintended line breaks and an enlarged image.
What could be causing the line to break in Outlook and not Apple Mail? Is there a "safeguard" parameter of some sort I could add to make it compatible with both? I'm really new to HTML.
<html>
<STYLE>
A {
text-decoration: none;
}
</STYLE>
<body>
<table width="500%" height="48" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding:0 8px 0 0;vertical-align: middle;"><img alt="TETON Sports" style="width:69px; height: 50px;" src="https://tetonsports.imagerelay.com/ql/015ce962f5e74fbfb86292c6b6e60ea8/email-icon-01.png">
</td>
<td style="font-size:1em;padding:0 0 0 0;vertical-align: top;" valign="top">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.4;font-family:Verdana, Geneva, sans-serif;font-size:14px;color: #000001;">
<tr>
<td>
<div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#000001;">
TETON Sports
</div>
</td>
</tr>
<tr>
<td style="padding: 0px 0;">
<div style="color:#000001;font-family:Helvetica, Geneva, sans-serif;">
<b> Josh Jorgensen </b>
<span style="color:#FF9E18;font-family:Helvetica, Geneva, sans-serif;"> <b>//</b> </span>
<span style="color:#54565A;font-family:Helvetica, Geneva, sans-serif;"> <i>Photographer</i> </span>
</div>
</td>
</tr>
<tr>
<td>
<span style="font: 1.0em Helvetica, Geneva, sans-serif;color:#54565A;" <span><i>josh#tetonsports.com</i></span>
</td>
</tr>
</table>
</td>
<br>
<br>
</tr>
</table>
<br style=“ line-height:200px;”>
<div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#ffffff;">
...
</div>
<span> </span>
</td>
</tr>
</table>
</body>
</html>
In your table, you are setting your table's width to 500%, while the image's width is in pixels.
So when your window is smaller, your entire table gets smaller but your image stays the same size, eating up space from the text section.
Consider being consistent across the board, and using either only percentages or only pixels for your widths.
Related
I'm very new to HTML, and I've built a custom HTML email signature. I want it to look like this:
However, with my code below, the three strings I'm grouping next to each other end up with white space between the first and subsequent strings as shown below
What is a proper way to group the three strings together without getting a gap between elements?
<div class="presentational-container">
<table role="presentation" cellpadding="0" cellspacing="0" border="0"style="background: none;margin: 0;padding: 10px 10px 0;border-width: 1px 0 0 0;border-style: solid;border-color: #F2F2F2;">
<tbody>
<tr class="outer-row" style="padding: 0 12px 0 0;">
<td class="headshot-cell" style="text-decoration: none;vertical-align: middle;width: 72px;padding: 0 6px 0 0;">
<a href="http://www.robertcooper.me">
<img src="https://tetonsports.imagerelay.com/ql/6cde221aa42c4ec8b325b3c0f6235d2e/email-icon-01.png" name="preview-image-url" style="vertical-align: middle;width:72px"/>
</a>
</td>
<td class="description-cell">
<table role="presentation">
<tbody>
<tr>
<td colspan="2" class="company" style="font-weight: normal;color: #000001;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">TETON Sports</td>
</tr>
<tr>
<div>
<td colspan="2" class="name" style="font-weight: bold;color: #000001;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">Josh Jorgensen</td>
<td colspan="2" class="divider" style="font-weight: bold;color: #FF9E18;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">//</td>
<td colspan="2" class="title" style="font-style: italic;font-weight: normal;color: #54565A;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">Photographer</td>
</div>
</tr>
<tr>
<td valign="top" class="website" style="font-style: italic;font-weight: normal;color: #54565A;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">
josh#tetonsports.com
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Those three text parts are in separate table cells, and these tablecells even have colspan="2". So these are aligned with the table cells of the rows above and below which also have colspan="2".
I would either put all three in one cell, or at least remove the colspan="2" from them and add colspan="3" to the cells below and above, since all rows should have the same amount of cells for lining up properly.
I've created a custom HTML email signature with an embedded image. The end result in Komodo previewer and Apple Mail client looks like this
However, once I bring the same HTML code into the Outlook desktop app on a Windows PC the signature renders like this
It seems like Outlook is ignoring the width styling entirely.
How do I get correct sizing of my embedded image in Outlook?
<table cellpadding="0" cellspacing="0" border="0"style="background: none;margin: 0;padding: 40px 10px 30px;">
<tbody>
<tr style="padding: 0 12px 0 0;">
<td style="vertical-align: middle;width: 50px;padding: 0 6px 0 0;">
<a href="http://www.tetonsports.com">
<img src="https://tetonsports.imagerelay.com/ql/6cde221aa42c4ec8b325b3c0f6235d2e/email-icon-01.png" name="preview-image-url" style="vertical-align: middle;width:69px"/>
</a>
</td>
<td>
<table>
<tbody>
<tr>
<td style="font-weight: normal;color: #000001;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">TETON Sports</td>
</tr>
<tr>
<div>
<td
<span style="font-weight: bold;color: #000001;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">Josh Jorgensen</span>
<span style="font-weight: bold;color: #FF9E18;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">//</span>
<span style="font-style: italic;font-weight: normal;color: #54565A;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">Photographer</span>
</td>
</div>
</tr>
<tr>
<td valign="top" style="font-style: italic;font-weight: normal;color: #54565A;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">
<a style="text-decoration: none;font-style: italic;font-weight: normal;color: #54565A;" href="brandon#tetonsports.com">josh#tetonsports.com</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Have you tried using the width HTML attribute of the <img> tag like this: width="69"?
Here's the whole tag:
<img src="https://tetonsports.imagerelay.com/ql/6cde221aa42c4ec8b325b3c0f6235d2e/email-icon-01.png" name="preview-image-url" style="vertical-align: middle;" width="69"/>
In the email signature I'm making for my company I have an embedded image on the left. When I preview the code in Chrome or my IDE the image is sized properly taking up the same height as the three lines of evenly-spaced text to its right. However, when others in my company receive emails from me, sometimes the image is significantly taller than the lines of text next to it. How do I ensure that my image stays a consistent size across devices and email clients?
<html>
<STYLE>A {text-decoration: none;} </STYLE><body>
<table data-mysignature-date="2019-09-17T19:52:14.752Z" data-mysignature-is-paid="0" width="500" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td
valign="center" width="0" style="padding:0 8px 0 0;vertical-align: middle;"><img alt="TETON Sports" width="100" style="width:67px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
</td>
<td style="font-size:1em;padding:0 0 0 0;vertical-align: top;" valign="top">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.4;font-family:Verdana, Geneva, sans-serif;font-size:90%;color: #000001;">
<tr>
<td>
<div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#000001;">
[COMPANY NAME]
</div>
</td>
</tr>
<tr>
<td style="padding: 0px 0;">
<div style="color:#000001;font-family:Helvetica, Geneva, sans-serif;">
<b> Austin Berenyi </b>
<span style="color:#FF9E18;font-family:Helvetica, Geneva, sans-serif;"> <b>//</b> </span>
<span style="color:#54565A;font-family:Helvetica, Geneva, sans-serif;"> <i>Graphic Designer</i> </span>
</div>
</td>
</tr>
<tr>
<td>
<span style="font: 1.0em Helvetica, Geneva, sans-serif;color:#54565A;" <span><i>austin#company.com</i></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
It may sounds naive, but just try to specify height of your img:
<img alt="TETON Sports" style="width:67px; height: 48px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
In addition try to always set font-size of text (px or em) and try to avoid these values as percents.
I don't have a lot of experience with HTML tables and in-line CSS, but I'm trying to create an HTML email signature. Ideally, I'd like to have a small image on the left, text in the center, and a larger logo on the right, with a line of text centered below everything.
I have the basic content in, however I've tried to align everything with floats which don't seem to be working. What's the best way to have everything lined up in order horizontally?
jsfiddle
<br />
<meta name="format-detection" content="telephone=no">
<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:0;padding:0;">
<tr>
<td width="47" style="float:left;width:47px;margin:0;padding:0;">
<img src="http://lorempixel.com/47/43/" alt="First Last" style="border:none;width:47px;">
</td>
<td width="10" style="width:10px;"> </td>
<td valign='top' style="margin:0;padding:0;">
<table id="sig2" cellspacing='0' cellpadding='0' border-spacing='0' style="float:left;padding:0;margin:0;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:13px;color:#D31145;border-collapse:collapse;-webkit-text-size-adjust:none;">
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;"><a style="border:none;text-decoration:none;color:#D31145;" href="mailto:email#example.com">FIRST LAST</a>
</td>
</tr>
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;">
<span style="border:none;text-decoration:none;color:#000104;">REALTOR | P <a style="border:none;text-decoration:none;color:#000104;" href="tel:1111111111">111.111.1111</a></span>
</td>
</tr>
<td width="177" style="float:right;width:177px;margin:0;padding:0;">
<img src="http://lorempixel.com/177/54/" alt="ZOPA Realty Group" style="border:none;width:177px;">
</td>
</table>
<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:-15 0 0 60;padding:0;">
<tr>
<td><span style="margin:0;padding-left:8px;font-size:7px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;color:#000104;white-space:nowrap;">BRE xxxxxxxx | Broker BRE xxxxxxxx. In association with Keller Williams. Each Keller Williams Realty office is independently owned and operated.</span></td>
<br />
Forget float, margin and html 3/5. The mail is very obsolete. You need do all with table.
One line = one table. You need margin or padding ? Do another column.
Codepen
Example : i need one line with
1 One Picture of 40*40
2 One margin of 10 px
3 One text of 400px
I start my line :
<table style=" background-repeat:no-repeat; width:450px;margin:0;" cellpadding="0" cellspacing="0" border="0">
<tr style="height:40px; width:450px; margin:0;">
<td style="height:40px; width:40px; margin:0;">
<img src="" style="width=40px;height40;margin:0;display:block"
</td>
<td style="height:40px; width:10px; margin:0;">
</td>
<td style="height:40px; width:400px; margin:0;">
<p style=" margin:0;"> my text </p>
</td>
</tr>
</table>
This should do the trick:
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="40" valign="top" rowspan="3">
<img alt="" src="" width="40" height="40" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="350" height="40" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
LAST FIRST<br>
REALTOR | P 123.456.789
</td>
</tr>
<tr>
<td width="350" height="70" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<img alt="" src="" width="200" height="60" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td width="350" height="20" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
</td>
</tr>
</table>
UPDATE: Adjusted code per the comments:
After viewing your jsFiddle, an important thing to note about tables is that table cell widths in each additional row all have to be the same width as the first, and all cells must add to the total width of your table.
Here is an example that will NOT WORK:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#252525">
</td>
<td width="400" bgcolor="#454545">
</td>
</tr>
<tr>
<td width="300" bgcolor="#252525">
</td>
<td width="300" bgcolor="#454545">
</td>
</tr>
</table>
Although the 2nd row does add up to 600, it (and any additional rows) must have the same 200-400 split as the first row, unless you are using colspans. If you use a colspan, you could have one row, but it needs to have the same width as the cells it is spanning, so this works:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#252525">
</td>
<td width="400" bgcolor="#454545">
</td>
</tr>
<tr>
<td width="600" colspan="2" bgcolor="#353535">
</td>
</tr>
</table>
Not a full tutorial, but I hope that helps steer you in the right direction in the future.
Here is the code you are after:
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="57" height="43" valign="top" rowspan="2">
<img alt="Rashel Adragna" src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_head.png" width="47" height="43" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="843" height="43" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
RASHEL ADRAGNA<br>
REALTOR | P 855.900.24KW
</td>
</tr>
<tr>
<td width="843" height="64" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<img alt="Zopa Realty Group logo" src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_logo.png" width="177" height="54" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td width="843" colspan="2" height="20" valign="bottom" align="center" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
</td>
</tr>
</table>
You'll note that I've added an extra 10px to some of your table cells. This in combination with align/valigns act as padding between your cells. It is a clever way to aviod actually having to add padding, margins or empty padding cells.
So, I'm having issues with Outlook 2007/2010 spacing (border collapse?) issue.
Here is an image as to what it is doing (the Hurry Now.. text gets pushed down)
Here is what it is supposed to look like & works fine in all other email clients.
Here is my snippet of code for the Hero section
<table cellpadding="0" cellspacing="0" width="561" align="center" bgcolor="#4b88cf" style="font-family: Tahoma, Arial, Verdana, sans-serif; font-size:40px; font-weight:normal; line-height:40px; text-align:left; color:#ffffff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="561" height="37" style="font-size: 0; line-height: 0" bgcolor="#4b88cf"> </td>
</tr> <!-- end spacer -->
<tr>
<td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">Save 10% on all</font></td>
</tr> <!-- heading -->
<tr>
<td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">EasyACCT 2013 products.</font></td>
</tr> <!-- heading -->
<tr>
<td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">Only 4 days left!</font></td>
</tr> <!-- heading -->
<tr>
<td width="561" height="25" style="font-size: 0; line-height: 0" bgcolor="#4b88cf"> </td>
</tr> <!-- spacer here -->
<!-- start button -->
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="left" style="font-family: Tahoma, Arial, Verdana, sans-serif; font-size:14px; font-weight:normal; line-height:20px; text-align:left; color:#ffffff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="border-collapse: collapse;"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/left-btn.png" border="0" style="display: block;" alt="left side button"/></td> <!-- left side button -->
<td align="center" style="font-weight: bold; border-collapse: collapse;" bgcolor="#f0640f"><font color="#ffffff" style="text-decoration: none;">Renew Now to Save 10%</font></td>
<td style="border-collapse: collapse;"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/right-btn.png" border="0" style="display: block;" alt="right side button"/></td> <!-- right side button -->
</tr>
</table>
</td>
</tr>
<!-- end button -->
<tr>
<td width="561" height="15" style="font-size: 0; line-height: 0; border-collapse: collapse;" bgcolor="#4b88cf"> </td>
</tr> <!-- spacer here -->
<tr>
<td valign="top" width="561" style="font-size: 18px; color: #ffffff; border-collapse: collapse;"><font color="#ffffff">Hurry, offer ends October 31!</font><sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></td>
</tr>
<tr>
<td width="561" height="23" style="font-size: 0; line-height: 0; border-collapse: collapse;" bgcolor="#4b88cf"> </td>
</tr> <!-- spacer here -->
</table>
This is a problem I've come across with Outlook 2007,2010 and of course 2013. They don't like small cells.
I've found this code has worked for me and gone through Litmus tests.
<tr height="1">
<td width="482" height="1" align="left" valign="top" background="#000000" style="background:#000000;font-size: 1px; line-height: 0px; mso-line-height-rule: exactly;"> </td>
</tr>
The mso-line-height-rule: exactly; is an outlook specific style. The font-size: 1px should match however much height you want your cell to be. The line-height: 0px; zero's out any line-height space.
HOWEVER, after testing your code snippet with the updated cells this doesn't seem to be the actual problem. I made the spacer cells black so I could better see what was actually going on.
The black spacer cell ends well above the copy, ie. it's not pushing your text down. The issue is actually the cell with the white copy in it.
I added a line height to the cell and removed the border-collapse:collapse; (you don't need it on individual cells. You may just want to double check your superscripts are all good.
<tr>
<td valign="top" width="561" style="font-size: 18px; line-height: 20px; color: #ffffff;"><font color="#ffffff">Hurry, offer ends October 31!<sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></font></td>
</tr>
This was the result:
Hope that helps.
Outlook has a minimum cell height of 19px, so the 15px cell you have as the spacer in seems to be expanding, evern though you have the font-size and line-height zero'd out.
An alternative way to do it, is instead of having your text sandwiched between two spacer rows, make 1 taller row and vertically center it instead:
<tr>
<td valign="middle" width="561" height="50" style="font-size: 18px; color: #ffffff; border-collapse: collapse;"><font color="#ffffff">Hurry, offer ends October 31!</font><sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></td>
</tr>
Throughout your whole email, you don't really need separate rows for each line of text, just use <br> instead to separate the rows.
I agree with John. Just use the breaks to create vertical whitespace. You're making it more difficult for yourself, without any reason :-)
Just put the right attributes at their right place: your use of the font-tag is overwhelming, as is the border-collapse:collapse and the font-size:0; line-height:0;.
If you want to create a whitespace, give a height at the TD (20px) and style="font-size:20px; line-height:20px;", with a BR-tag inside (no nbsp).
See my example:
<table cellpadding="0" cellspacing="0" border="0" width="561" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr><td bgcolor="#4b88cf" align="left" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:40px; line-height:46px; color:#ffffff;"><br />Save 10% on all<br />EasyACCT 2013 products.<br />Only 4 days left!<br /><br /></td></tr>
<tr><td bgcolor="#4b88cf"><table cellpadding="0" cellspacing="0" border="0" align="left"><tr>
<td width="12" height="50" bgcolor="#f0640f"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/left-btn.png" width="12" height="50" alt="" border="0" style="display:block;" /></td>
<td bgcolor="#f0640f" align="center" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:14px; line-height:20px; color:#ffffff;"><strong style="color:#ffffff;">Renew Now to Save 10%</strong></td>
<td width="14" bgcolor="#f0640f"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/right-btn.png" width="14" height="50" alt="" border="0" style="display:block;" /></td>
</tr></table></td></tr>
<tr><td bgcolor="#4b88cf" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:18px; line-height:20px; color:#ffffff;"><br />Hurry, offer ends October 31!<sup style="font-size:12px; line-height:0; vertical-align:8px">1</sup><br /><br /></td></tr></table>