Hello guys i am trying to send an email with HTML in it, and of course i know that the formatting and alot of CSS is not supported in Outlook, but i was wondering why this simple thing was showing broken, is there any quick fix or a workaround/alternative? look at how the buttons should appear:
http://puu.sh/84ijt.png
But they appear like this:
http://puu.sh/84ijA.png
Here is the code for it:
<tr>
<td style="display:block;min-height:38px;max-height:38px;">
<p style="margin-left:15px;">
<a style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;margin-right:10px;float:left;"
href="link here..">Enquire</a>
Full Details
</p>
</div>
</tr>
</td>
There is a bit of mis-information in this thread.
You can use an image for a button, however more advanced designers are trending towards "bulletproof" buttons these days. They display with images turned off. See this link: buttons.cm
Background images are supported in Outlook, but only in the <body> tag OR using VML, see the buttons.cm link above or backgrounds.cm for examples.
Back to your specific example, there are a few ways to accomplish it, but here is how I would do it:
<table width="300" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000;">
<tr>
<td style="padding-top:20px; padding-bottom:10px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Enquire
</td>
<td width="20">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Full Details
</td>
<td width="50">
</td>
</tr>
</table>
</td>
</tr>
</table>
On a side note, you need to use the 6-digit hex colors in html email, and don't waste your time with the following css properties as they have inconsistent support:
margin (use padding instead)
text-align (use align="" instead)
min-height & max-height
float (use align="" instead)
background-color (use bgcolor="" instead)
Also, avoid shorthand like padding:5px 5px 0px 5px;. Unfortunately you need to write it out padding:5px; padding-bottom:0;
As an email marketer I suggest you use an image for your button. Especially if it is a call to action. The one thing you don't want to be broken is that, and the only way you can trust it wont be and that is to use an image within a table cell.
I hope that helps!
Have you tried giving the <td> the background-color? (or another container)
You could also try
<a href="#">
<span style="display:block;background-color:red;color:white;width:100px;text-align:center;">link</span>
</a>
I haven't tested in Outlook but it might work.
Using images isn't the best solution, especially since most of the time emails are rendered without images until the user accepts to view images.
The way I do it is a table with in a table, so something like this:
<table width="outside container width here">
<tbody>
<tr>
<table style="apply your styles here, background colors, paddings etc (do not use margins, poorly supported.)" height="height of inner container" width="inner container width here" align="however you want it aligned">
<tbody><tr><td>Your button actually goes here</td></tr></tbody>
</table>
</tr>
</tbody>
</table>
Related
I'm trying to make a signature for email (Lotus Notes). However, while it looks fine on Lotus (yay) I'm getting this space between the title and email address on Gmail.
And I have no idea why that is.
Picture of how it looks on Lotus Notes:
And how it looks on gmail:
Here link to a Fiddle Doesn't work properly as it does on email (don't know why):
<table border="0" cellpadding="6" cellspacing="0">
<tr align="left">
<td valign="top" width="100" ><img src="https://i.imgur.com/XCyNdd6.png" alt="logo" ></td>
<td valign="top" width="700" ><strong><span style=" display:table;font-family: Arial; font-size: medium; "><font size="3" face="Arial">John Doe Smith</font></span></strong>
<table align="left" width="100%" cellpadding="2", cellspacing="0">
<tr >
<td><span style="display:table; font-size:small; margin-top:0px; text-decoration:none; font-family: Arial; color:#16161D;"><font size="2" face="Arial" color="#16161D">https:/URL-example.eu</font></span></td>
</tr>
<tr >
<td><span style=" display:table; font-size: small; text-decoration:none; font-family: Arial;"><font size="2" face="Arial" color="#16161D";>email#URL-example.eu</font></span></td>
</tr>
</table>
<table align="left" width="100" cellpadding="2", cellspacing="" >
<tr align="left">
<td width="30"><img src="https://i.imgur.com/f6DwyDA.png" alt="Example Name Facebook Account"></td>
<td width="35"><img src="https://i.imgur.com/BDQERsI.png" alt="Example Name Instagram Account"></td>
<td width="50"><img src="https://i.imgur.com/Xx1atey.png" alt=Example Name Twitter Account"></td>
</tr>
</table>
</td>
</tr>
</table>
Thank you for all your help.
It probably has to do with how you're adding the signature in Gmail.
The simplest method is to open your HTML + CSS in a webpage (you can even use the Stack Snippet you shared just full screen it) and hit ctrl/cmd + A to select all the content on the page it should highlight all in blue including images. Then hit ctrl/cmd + C to copy it to clipboard and just paste it into the signature field in Gmail. Your code works fine if you do the above.
I couldn't replicate this in a Gmail test. Should be fine - but check #JHeth's answer.
Nevertheless, I also found a slight difference on Outlook iOS, as it added a line-height:150% to the <font> and <a> tags. There are often defaults like this, so it's best to always specify font-size and line-height for <font> and <p> and <a> tags, and there will also be colour and text-decoration defaults for <a>.
For block elements there are default margins and paddings.
So that's how you will get consistency, by adding a HTML-email equivalent CSS reset (note it has to be inline like you've done here, as opposed to <style>).
I've recently started working on creating email templates, and have encountered some issues that I am not finding any explanation for.
I generated buttons from buttons.cm under the expectation that they would be bulletproof, and while they were great for most clients, they failed on web based outlook clients.
The results appeared like this (with slight modifications, explained later)
<table style="width: 100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td style="font-family: arial;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:30px;v-text-anchor:middle;width:150px;font-family:arial;background-color:#72BC00;color:#ffffff;" arcsize="14%" stroke="f" fillcolor="#72BC00">
<w:anchorlock/>
<center>
<![endif]-->
Learn More
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</td>
</tr>
</table>
What I am aiming for is this:
Screen shot of working version
But what I get for all browser based outlook clients is this:
Screen shot of failed version
The problem being that in the failed version
cell padding fails
the buttons are not links anymore, in fact all the styles are taken from the button and applied to the parent table.
the first item is actually supposed to be the last, but it is moved to the top, and stripped of all styles, for no apparent reason.
Is there a solution for this? I have yet to find anything. Thanks!
What I've added to the generated button is: Cell padding, changed display from inline-block to table (fixes the buttons from being 100% width and allows centered text in outlook), and made the containing element a table, not a div.
Buttons.cm was a good resource, but it's getting a little outdated.
I support Outlook but try to avoid VML whenever possible. I currently use something like this:
<!-- Button : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<span style="color:#ffffff">A Button</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
All the are messy, but it's something all clients universally understand.
A second, simpler option is to use border-width to fake padding, like so:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
I am a button →
</td>
</tr>
</table>
</td>
</tr>
</table>
Some email clients (mainly Outlook) don't allow a border-width more than 12 or 15 pixels, and this only works with solid colors, so this some have some drawbacks.
More options for bulletproof buttons are on Litmus.
For #2, are you updating the URL in the VML code as well as the anchor tag? Outlook uses the URL in the VML for the link, not the anchor tag.
This causes a problem for a lot of link tracking systems in email, which is one of many reasons I avoid using these kinds of buttons. We've convinced most clients to go with plain CSS styled buttons, with the understanding that Outlook will loose the rounded corners.
I've been looking for answer for this for ages, either I can make the box link or the word but never both, however I think this may be the answer. I have sent out a few emails using it and it seems to work fine.
<center>
<table align="center" cellpadding="20px" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" style="padding: 15px;height: 60px; width: 100%" class="" ><br>
<br>
Find out more <!--[if mso]> <![endif]--><br>
<br></td>
</tr>
</tbody>
</table>
</center>
I am coding a html email, the problem is that I have a black border around my table, when I slcide psd make it no image and set background color like this
<td width="640" height="2" colspan="16" style="background-color:#666666;">
left and right <td> look ok in html and the email client, but the upper and bottom one are bit expanded, see attached image for this
This is in my laptop upper <td>
and this is how it looks in emails
code is simple as
<td width="640" height="2" colspan="16" style="background-color:#666666;">
</td>
What's the problem with it? Please help ..!
Outlook expands all table cells to a minimum of 19px high. This is something you'll need to work around in html email design. One method is to create a 20px high image that has your 2px border across the bottom.
Add this to your CSS and see how it works:
body
{
margin: 0;
padding: 0;
}
try adding
style="border-collapse:collapse;"
to your
<table>
like this
<table style="border-collapse:collapse;">
Your table has borders, as is the standard. This is my snippet for all of my tables' structure-
<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left">
</td>
</tr>
</table>
Is there a spacer gif in your TD ?
If yes, the trick is simple :
<img src="SPACER" border="0" style="display:block;" height="x" width="y" alt="" />
This will collapse the white space around your images. Make sure you set the same height to your td and img also.
I think you might need to add some position property
Try position: absolute
I have been working on this newsletter for a customer. Everything looks perfect and exactly the way I want it to. Even Outlook understands the newsletter but then.. Gmail.. I really don't understand what is wrong with Gmail in the browser. I have this piece of code.
<table class="w650" width="650" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td height="20"></td>
</tr>
<tr>
<td width="225" bgcolor="#e1822d" valign="top" align="left">
<div style="padding:12px 20px 0px 20px;">
<div style="font-family:arial;font-size:20px;color:#FFFFFF;line-height:36px;">
<singleline label="Title">Tenerife</singleline>
</div>
<div style="font-family:arial;font-size:11px;color:#FFFFFF;line-height:20px;">
<multiline label="Description">Click to see all properties <br /> Lorem Ipsum Dolor sit amet</multiline>
</div>
</div>
</td>
<td width="425" valign="top" align="left">
<img editable="true" src="images/side_image_01.jpg" label="Image" width="425" border="0" style="border:none;" alt="Image" />
</td>
</tr>
</tbody>
</table>
And in every other mail client it outputs like this:
But in Gmail and Gmail only it outputs with an additional size in the orange column:
I know it is silly to focus on but it really annoys me that my HTML code is bullet proof and even old Outlook mail clients can show it right but then Gmail twists it.
Does anybody know what I should type either in the inline css or head css or anything - to make Gmail understand?
Add display: block; to the image tag's style attribute or img { display: block; } if you have a <style> section anywhere and need to apply this to other images as well.
For some reason Gmail adds extra margin to images that aren't explicitly specified as display: block.
Each mail client has different HTML rendering technique.
I can not really find out the difference from both the images. I see both images are identical.
From what I have understood, All I can say is, you can set fixed width inline in order to force Gmail to use your styling. !important can help you to force the styling.
Hi i have a issue in outlook 2010 i want to give 10px space between the tds but its not working. please help.
<table style="cellspacing:0px;cellpadding:0px;border:0;border-spacing:10px;">
<tbody>
<tr>
<td id="cont0" align="top" style="border-collapse:collapse;padding:0;overflow: hidden;height: 96px; width: 96px;margin-right:auto;vertical-align:top;border: 1px solid #CCCCCC;">
<a id="link0" href="#" style="border:0">
<img id="previewimage0" style="border:0" src="http://i.sample.com/00/s/MTY2WDIwMA==/$(KGrHgoS,KEEk,K!Bv9GBQIi!CNhLg~~60_0.JPG">
</a>
</td>
<td id="cont1" align="top" style="border-collapse:collapse;padding:0;overflow: hidden;height: 96px; width: 96px;margin-right:auto;vertical-align:top;border: 1px solid #CCCCCC;">
<a id="link1" href="#" style="border:0">
<img id="previewimage1" style="border:0" src="http://i.sample.com/00/s/MTQ5WDIwMA==/$(KGrHqERQ,IE+tWswcklBQIi!C8rQg~~60_0.JPG">
</a>
</td>
</tr>
</tbody>
</table>
try adding a table cell between them with the width of 10px :
</td>
<!-- your first td ends -->
<!-- the spacer td -->
<td align="top" width="10> </td>
<!-- your second td begins -->
<td id="cont1" align="top">
Works for my email templates everytime in all email clients.
Try adding the cellspacing property to the table tag
<table cellspacing="10" style="border:0;">
Marks answer will do the job perfectly, don't add cellspacing or cellpadding as it is incredibly inconsistent across email clients, I would also say don't use margin and padding for the same reason but in rare cases where you cannot use any other spacing method you wont have any choice. For your border I would also avoid using the shorthand and set each part of the border individually:
border-color: #ffffff;
border-style: solid;
border-width: 1px;
as some clients will just ignore the shorthand version.
where possible you should use html styling rather than inline css, as even though inline is the only real way to use css, html is still more widely recognised across older email clients.
valign="top"
cellpadding="0"
cellspacing="0"
all of these can be added to the tag rather than including them in styles. This will ensure any old clients or even just company webmails wont kick up a fuss.
I know you didn't ask about it, but just for consistencies sake I thought I would point that out.