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.
Related
Trying to get last piece done which is the Email footer area.
There are 4 links in a table, which in web-view are fine, they are in horizontal line.
On Mobile version I'm trying to have them in sets of 2.
Meaning 2 links on top and 2 below them.
The thing is this needs to be done with inline CSS, without having style in it's own separate section.
<table border="0" cellpadding="0" cellspacing="0" id="Table5" width="100%">
<tr style="font-size: 11px; background-color: black;">
<td align="center">
<br>
<br>
<span style="color:#7A7A7A; line-height: 1.3; "><font face="Arial" size="1" ><b>GENERIC INFORMATION 123
<div style="line-height:1.3;">T 000 000 000 |
TEST#TESTING.COM<br></div></b></font></span><br>
<br>
<span style="color: rgb(221, 221, 221);"><font face="Arial" size="1"><b><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">BOOK APPOINTMENT</span></a><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">PRIVACY</span></a><a alias="" conversion="false" data-linkto="http://"google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">UNSUBSCRIBE</span></a><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">CONTACT US</span></a></b></font></span><br>
<br>
</td></tr></table>
Any advice? #media is out of the question currently since it cannot be used with inline CSS.
This is the code you need to start. You'll have to do some footwork to get this to not stack in Outlook desktop email clients. It works in every major email client and does not require a #media tag.
The first table always spans the width of email body.
The Left and Right are 300px wide. When the email client is under 300px wide, they will stack.
<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="100%" style="">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: center;">
<p style="margin: 0;">Single Column</p>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="300" style="float:left;">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
<p style="margin: 0;">Left Column</p>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="300" style="float:left;">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
<p style="margin: 0;">Right Column</p>
</td>
</tr>
</table>
Good luck.
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'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.
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>