I'm using an email template with inline style. Unfortunately the button in this template is not linked, but only the word in the button.
My problem: I've linked the whole table, but then it didn't look correctly in Firefox (blue underline, some wrong pixels on left-hand side).
How can I link the whole button correctly?
<table border="0" align="center" width="260" cellpadding="0" cellspacing="0" bgcolor="2a99d8" style="border-radius: 5px;" class="main_color">
<tr><td height="13" style="font-size: 13px; line-height: 13px;"> </td></tr>
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="border-radius: 5px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td align="center" style="color: #ffffff; font-size: 14px; font-weight: 700; font-family:'Roboto', Arial, sans-serif;">
<!-- ======= main section button ======= -->
<div style="line-height: 24px;">
FIND OUT MORE
</div>
</td>
<td width="20" align="right">
<img align="bottom" width="6" height="10" style="width: 6px; height: 10px;" src="http://promailthemes.com/raula/img/btn-arrow.png" />
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="13" style="font-size: 13px; line-height: 13px;"> </td></tr>
</table>
Put the table in a containing div and use javascript to link to hyperlink the div.
Related
I'm building a responsive newsletter which display correctly in every browsers and email clients except Outlook 2007 & 2010 (though it's ok on Outlook 2003 and previous, and on 2013 and upper versions).
There is an extra 18px space added inside one of the table cells of this header:
With some explanations:
1 is a a table inside my first cell, which seems to have the valid height (186px). 2 and 3 pictures are 186px height, but their cells are bigger.
Here is the header html:
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left" valign="top" style="border-collapse: collapse !important; background-color:#ffffff;" bgcolor="#ffffff">
<tr>
<td width="225" height="186" bgcolor="#7c64a9" class="nd-bandeau-cell1" style="background-color: #7c64a9">
<table width="100%" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td width="20" rowspan="5" class="head-left-margin"> </td>
</tr>
<tr>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 9px; line-height: 9px;">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
<tr>
<td height="120" align="right" valign="bottom" class="nd-bandeau-titre-cell">
<img src="http://mywebsite/img/titre-lettre.jpg" width="204" height="71" alt="La lettre de votre patrimoine" class="nd-bandeau-titre" style="font-family: Arial, sans-serif; color: #ffffff; font-size: 20px;" />
</td>
</tr>
<tr>
<td height="44" align="left" valign="top" class="nd-bandeau-stitre-cell" style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; color: #ffffff;">
N°1 | Octobre 2015
</td>
</tr>
<tr>
<td height="13" align="left" valign="top" class="nd-bandeau-left-bottom-cell" style="mso-line-height-rule: exactly; font-size: 13px; line-height: 13px;">
<img src="http://mywebsite/img/head-left-bottom.gif" width="205" height="13" alt="" class="nd-bandeau-left-bottom" style="display: block;" />
</td>
</tr>
</table>
</td>
<td width="178" height="186" align="left" valign="middle" class="nd-bandeau-cell2">
<img src="http://mywebsite/img/bandeau-left.jpg" width="178" height="186" alt="" style="display: block; background-color: #c3b9b1;" />
</td>
<td width="197" height="186" align="left" valign="middle" class="nd-bandeau-cell3">
<img src="http://mywebsite/img/bandeau-right.jpg" width="197" height="186" alt="" style="display: block; background-color: #c3b9b1;" />
</td>
</tr>
</table>
</td>
</tr>
I tried many fix, none worked: adding line-height to the cells that contains image with mso-line-height-rule: exactly before, collapsing HTML to remove any space, changing doctype... I'm a little out of ideas here, anyone have any clue of what is happenning here?
it's because you have a cell (line 7) that is < 15px tall. Outlook 2007 and 13 will expand whatever cell you have that's under to 15.
a workaround:
<tr valign="bottom">
<td height="9" style="font-size:9px; line-height:9px;">
</td>
</tr>
i usually get around doing that by using padding-top and bottom on tds (nesting tables where needed)
I found out what was wrong, and it was pretty trivial. The first row of my table (the one with rowspan) was missing a second cell - so the table layout was wrong.
Just by changing :
<tr>
<td width="20" rowspan="5" class="head-left-margin"> </td>
</tr>
<tr>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
To :
<tr>
<td width="20" rowspan="4" class="head-left-margin"> </td>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
Fixed the issue. After that I still had one pixel vertical spacing after my images that are in cells with height < 15px. Thanks to zazzyzeph answer, I fixed it by changing the line-height and font-size to 0px (setting the height of the image didn't worked for me) with mso-line-height-rule, adding margin: 0 on the image and by collapsing the code to leave no space before/after the picture.
For example:
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 0px; line-height: 0px;"><img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" /></td>
With all those fix my header now show perfectly on all email clients.
I have the following code (is for campaign monitor):
Left Image:
<table cellspacing="0" border="0" cellpadding="0" valign="top">
<tr>
<td class="content" valign="top" height="200"
style="padding: 0 20px 20px 20px; color: #333; font-size: 14px; line-height: 20px; font-family: Helvetica, Arial, sans-serif"
width="600">
<img src="./images/logo.gif" alt=""
width="260" align="left"
editable="true" hspace="10"
label="Image"/>
<multiline label="Description">Enter your
description here.
</multiline>
<span class="button">
<singleline label="Link">Link</singleline>
</span>
</td>
</tr>
</table>
Right Image:
<table cellspacing="0" border="0" cellpadding="0" valign="top">
<tr>
<td class="content" valign="top" height="200"
style="padding: 0 20px 20px 20px; color: #333; font-size: 14px; line-height: 20px; font-family: Helvetica, Arial, sans-serif"
width="600">
<img src="./images/logo.gif" alt=""
width="260" align="right"
editable="true" hspace="10"
label="Image"/>
<multiline label="Description">Enter your
description here.
</multiline>
<span class="button">
<singleline label="Link">Link</singleline>
</span>
</td>
</tr>
</table>
On Outlook The text next to the image is middle aligning with the image when it should be top aligning.
All other clients appear to be fine.
Have you tried adding vertical-align: top; to the style attribute within the td instead of using the attribute valign?
Also maybe move the height to the style attribute to.
I have the following HTML:
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#C5C5C5">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628618/image01_et7dqm.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT ABOUT SOMETHING YET TO BE CONFIRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 2 Column Images - text left -->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td align="right">
<a href="#"><img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" border="0" style="border-radius: 0px; width: 20px; display: block;" class="deviceWidth" />
</td>
</tr>
</table>
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#E1E1E1">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628616/image1.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT YET TO BE CONFRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
which renders as follows
As you can see at the bottom I have a triangle which I'm trying to position so it overflows on to the next box, unfortunately I can not for the life of me get it to sit correctly, i.e the white space between the dark shade and lighter shade of gray to dis-appear can someone give me a hand please the end result is to look like this :
First of all it is recommended not to use tables for formatting page sections. In this case you can set the Parent of triangle as a relative positioned element with height of 0px and position triangle as absolute element. So:
<div class="deviceWidth" style="width:580px;position:relative;height:0;margin-right:auto;margin-left:auto;">
<img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" style="border:0;position:absolute;top:0;right:20px;border-radius: 0px; width: 20px;" class="deviceWidth">
</div>
also please note that :
remove the display:block from image
set border:0 inside styles not as a separate attribute
I have added margin-right:auto and margin-left:-auto to align div in center of screen
I am trying to create a single page, will be used as a newsletter, so my code is html/css inline.
http://jsfiddle.net/Chamberja/6t9r14ew/
I want to add a background image behind that entire table so the logo and the text will appear in the foreground.
I have tried adding
style="background-image: url("bg.jpg")"
and
style= "background: url(bg.jpg)"
So the final code looks like
<table style="background: url(sportip.biz/alpha.jpg)" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td style="padding:10px 20px" class="center">
<img src="http://sportip.biz/nlsiplogo.jpg" alt="" border="0" />
</td>
</tr>
</table>
I think I am doing the in-line wrong.
I hope this is what you looking for:
<table style="background: url(sportip.biz/alpha.jpg)" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td style="padding: 10px 20px" class="center">
<img src="http://sportip.biz/nlsiplogo.jpg" alt="" border="0" />
</td>
</tr>
</table>
<!-- End Logo -->
<!-- Nav -->
<table style="position: absolute; margin-top: 0; margin-left: 0;" border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
<tr>
<td class="center" style="font-size: 13px; color: #272727; font-weight: light; text-align: right; font-family: Georgia, Times, serif; line-height: 20px; vertical-align: middle; padding:10px 20px; font-style:italic">
<b>Dear #name#,
Check out the latest releases of our magazines</b>
</td>
</tr>
</table>
Here's the fiddle.
jsfiddle.net/shanidkv/g0dd3vcm/1/
Find the updated JSfiddle code.
Note: Try to copy and past above url to browser facing some problem to attach link directly or on top of text
Many email clients do not support rendering a background image inside a table. See here for some examples of workarounds: http://blog.mailermailer.com/email-design/background-images-in-html-email-the-naked-truth
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>