I am in the process of learning HTML to set up email campaigns at work. I have pulled some elements from a responsive template online. I have the following block of code, displaying two buttons. They display side by side, with no margin in between. I have tried many different things with no luck.
<td data-bgcolor="bg-button" data-size="size button" data-min="10" data-max="16" class="btn" align="center" style="font:12px/14px Arial, Helvetica, sans-serif; color:#292c34; text-transform:uppercase; mso-padding-alt:12px 10px 10px; border-radius:8px;" bgcolor="#8B0000">
<a target="_blank" style="text-decoration:none; color:#ffffff; display:block; padding:12px 20px 10px;" href="http://www.holidayvacations.net/index.php?page=catalog">Request a Catalog!</a>
</td>
<td data-bgcolor="bg-button" data-size="size button" data-min="10" data-max="16" class="btn" align="center" style="font:12px/14px Arial, Helvetica, sans-serif; color:#292c34; text-transform:uppercase; mso-padding-alt:12px 10px 10px; border-radius:8px;" bgcolor="#8B0000">
<a target="_blank" style="text-decoration:none; color:#ffffff; display:block; padding:12px 20px 10px;" href="http://www.holidayvacations.net/hvadmin/uploads/Flip_Books/Catalog/Catalog.html">View Online Catalog!</a>
</td>
try to make box-sizing:border-box; property in a buttons container, and then try to margin them
Just move the definitions of border-radius and bgcolor to the buttons itself, than you can add padding on the td and it will do the trick. use padding:
<table>
<tr>
<td data-bgcolor="bg-button" data-size="size button" data-min="10" data-max="16" class="btn" align="center" style="font:12px/14px Arial, Helvetica, sans-serif; color:#292c34; text-transform:uppercase; mso-padding-alt:12px 10px 10px; padding-right:5px; ">
<a target="_blank" style="text-decoration:none; color:#ffffff; display:block; padding:12px 20px 10px;background-color:#8B0000;border-radius:8px;" href="http://www.holidayvacations.net/index.php?page=catalog">Request a Catalog!</a>
</td>
<td data-bgcolor="bg-button" data-size="size button" data-min="10" data-max="16" class="btn" align="center" style="font:12px/14px Arial, Helvetica, sans-serif; color:#292c34; text-transform:uppercase; mso-padding-alt:12px 10px 10px;padding-left: 5px;">
<a target="_blank" style="background-color:#8B0000;text-decoration:none; color:#ffffff; display:block; padding:12px 20px 10px;border-radius:8px;" href="http://www.holidayvacations.net/hvadmin/uploads/Flip_Books/Catalog/Catalog.html">View Online Catalog!</a>
</td>
</tr>
</table>
In email design there's no shame in using the non-breaking space character
to force a space where you need it. All email clients tend to respect this and it's far more reliable than specifying padding and margin which some clients ignore or override.
As an aside, I don't know if you are testing in range of email clients, but if you need to make it work with Outlook and similar then css like border-radius won't be respected. This is a fairly good guide to what is safe: https://www.campaignmonitor.com/css/
Related
I am using the following code to create a button:
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr>
<td style="border-radius: 2px;" bgcolor="#1AB394">
<a href="https://www.example.com" target="_blank" style="padding: 8px 12px; border: none; border-radius: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; text-decoration: none; font-weight: normal; display: inline-block;">
CONFIRM ACCOUNT
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
The button is used in emails. When I send the email, the button looks fine on the web mail clients:
But doesn't look right on some other mail clients such as Outlook:
Can someone please help? Thanks.
You might want to take a look at this:
outlook-rendering-issues
Item #3.
I cannot test any of that because I do not use outlook as a client, but they seem to suggest that you might have to style the td enclosing the a tag more than you have. It does almost look like it is not treating the a tag as an inline-block like you have in your style. If you add the:
padding: 8px 12px;
to the enclosing td that might fix the appearance of the button.
I have created a line of square , it works in modern browser such as Gmail in google, but for outlook , it show like this:
The 4 block combine together and also the div height is not honoured, any idea or workaround?
<tr>
<td colspan="2" style="text-align: center;padding: 10px 0px; font-family: Helvetica, Arial, Tahoma, 'SimHei','微軟雅黑', STXihei, '華文細黑', sans-serif;">
<h3 style="text-align: center;margin-top: 0px; color: #606060;">Have a Question?</h3>
<table align="center" cellpadding="0" cellspacing="0" width="700px" border="0" style="margin:auto;">
<tr>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q1.jpg" /></td>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q2.jpg" /></td>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q3.jpg" /></td>
<td style="width:25%;text-align: center; font-family: Helvetica, Arial, Tahoma, 'SimHei','微軟雅黑', STXihei, '華文細黑', sans-serif;">
<div style="border: 3px solid #6C6E70; height: 144px; width:144px;">
<p style="color: #58595b; font-weight: bold; margin-top: 10px; margin-bottom: 0px; text-decoration: none; font-size: 16px;">Useful Links</p>
<p style="margin-top: 10px; margin-bottom: 0px; font-size: 15px;">My Account</p>
<p style="margin-top: 5px; margin-bottom: 0px; font-size: 15px;">Return Policy</p>
<p style="margin-top: 5px; margin-bottom: 0px; font-size: 15px;">FAQ</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
Thanks for helping.
In emails, particularly Outlook 7/10/13, it's better to define the td with a set width, rather than percentages. This then allows you to define the spaces properly (which I imagine Outlook is ignoring, and is mashing all of the td's together).
This is a great resource for how well supported some CSS is in various email clients. https://www.campaignmonitor.com/css/ Margin is one in particular you don't want to use, as it's not supported on Outlook.com.
Also, if this is for email, I'd recommend not using p tags (as they can render differently in different email clients), you could also center the text by adding a height to the td, rather than using nbsp's - see this previous answer for how to do that: How to writte text in the middle of an image without positioning and z-index?
Outlook doesn't support the margin property, or any of its variants: https://litmus.com/help/email-clients/outlookcom-margins/
You can use padding, but not on block elements. consider changing your p tags to a table and use padding to get the look you want.
The links in my email buttons don't redirect the user when they are clicked on, even a simple redirect as shown in the code snippet below has no effect when clicked.(tested in hotmail, gmail, yahoo mail so far). Any suggestions?
<p >
If you feel your email account has been compromised please take the appropriate steps to secure your account.<br />
Please click the button below so we can remove this registration request.<br />
<table cellspacing="10" cellpadding="0">
<tr>
<td align="center" width="240 " height="36" bgcolor="#0478db" style="margin-left:15px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color :ghostwhite !important; display: block;">
<a href="http:\\www.google.com" style="color: #ffffff; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Delete Registration Request
</a>
</td>
</tr>
</table>
</p>
When clicked on in gmail it takes me to a blank page; about:blank. In hotmail and Yahoo nothing happens
The url syntax you have used is wrong
Urls are supposed to be like http://www.google.com not like http:\\www.google.com
Try updating the URL as below
<p >
If you feel your email account has been compromised please take the appropriate steps to secure your account.<br />
Please click the button below so we can remove this registration request.<br />
<table cellspacing="10" cellpadding="0">
<tr>
<td align="center" width="240 " height="36" bgcolor="#0478db" style="margin-left:15px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color :ghostwhite !important; display: block;">
<a href="http://www.google.com" style="color: #ffffff; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Delete Registration Request
</a>
</td>
</tr>
</table>
</p>
I am making email templates so I am limited with what I can do.
I've got align="center" but I still need space between the two spans. How can I do this?
CODE:
<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
</td>
NOTE: I can't use margins or padding in email templates.
Margin is not supported in all email clients. I've also had some slight inconsistencies in padding in the past, although it does work.
Might seem like a hack (but isn't html for email that anyway?) - safest way in email is to use multiple together like so: .
I'd also use <font> tags instead of <span>, they are more consistent.
is padding what you are looking for?
span{
padding-left: 15px;
}
Try this CSS:
span{
margin-right: 10px;
}
Here is Demo: http://jsfiddle.net/84qyG/
Consider doing this:
<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span> <span style="color: #ffffff;
font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
</td>
Notice the subtle & nbsp; between the spans.
Not sure why you can't use margins though. Also, is there a reason you're using td? I'm guessing it's part of a table?
I believe what you are actually looking for is
display: block;
Ex. http://jsfiddle.net/kshreve/5jNGu/
Another way you could do this is to add <br/> after the closing spans.
Edit: You should also look into adding CSS classes to reduce the amount of redundant styling
Consider inserting an empty div in between the 2 span tags?
.spacer {
display: inline-block;
width: 10px;
}
Either using multiple non-break-space characters or spacer image can solve your problem.
<span style="">text #1</span><img src="images/spacer.gif" alt="" border="0" width="10" height="1" /><span style="">text #2</span>
You could use padding or margin:
http://jsfiddle.net/tpXF4/
<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;padding-right:30px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
</td>
If you are using jsx/React you can use back ticks:
<span>{` My text...`}</span>
Just add a whitespace to start your text (or end your text)
I'm having an issue with my HTML email in Outlook 2013 only, it looks great in previous versions including 2007 and 2010.
I've added style="display:block;
My table and td have a black background color.
I tried specifying width and height on the td and the img
and a line-height style as suggested on a previous post here for the containing td.
Here's the code:
<table width="200" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="158" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 20px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table>
Containing code:
<table width="510" align="center" cellpadding="0" cellspacing="0" style="" bgcolor="#000000">
<tbody>
<tr>
<td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 12px; line-height: 20px; padding: 0px 30px 0px 40px; ">
<table width="180" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="168" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 0px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table><span style="color:#feae38;font-size:16px;"><b>Don’t Miss Your Chance to Catch<br>Identifix’s Live Training, <span class="appleLinksWhite">3/12.</span></b></span><br><br>Seats are filling up quickly, so be sure to RSVP today for “Find and Fix Faster – Your Path to More Profits,” Identifix’s live training event. Held <span class="appleLinksWhite" style="color: #ffffff;">on Tuesday, March 12th,</span> the session will be conducted by nationally recognized automotive industry expert, Jerry “G” Truglia, president of Automotive Technician Training Services (ATTS).<br><br>
<span style="color:#feae38;font-size:14px;"><b>Learn how your shop can:</b></span><br><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Diagnose and repair vehicles faster</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Reduce non-billable work time</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Boost customer trust and satisfaction</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Increase tech confidence and productivity</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Stay profitable</b></span><br><br>
Join us <span class="appleLinksWhite" style="color: #ffffff;">from 7:30 – 9:00 p.m.</span> at <a style="color:#feae38;" target="_blank" href="https://plus.google.com/104076111016352099629/about?gl=us&hl=en">ATTS</a>, <span class="appleLinksWhite" style="color: #ffffff;">10 Lupi Plaza, Mahopac, NY 10541</span>. Pizza and soft drink will be provided, followed by a hands-on demonstration of Identifix’s award-winning online tool, Direct-Hit<sup>®</sup>.<br>
<br><strong><span style="color:#feae38;font-size:16px;"><b>Reserve your seat before it’s too late!<br>Call <span class="appleLinksWhite" style="color: #ffffff;">1.855.270.5855</span> now to RSVP.<span style="color:#feae38;"><b></strong><br><br></td>
</tr>
<tr>
<td align="left" valign="top" colspan="2" style="padding: 14px 0px; "><img src="http://identifix.skmgroupwork.com/email/iden045/images/iden045-divider.gif" width="550" height="1" alt="" border="0" style="background-color: #ffffff; width: 570px; height: 1px; display: block; "></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 11px; line-height: 16px; padding: 14px 0px 24px 40px;">
©2013 Identifix | <span class="appleLinksWhite" style="color: #ffffff;">2714 Patton Road | Roseville, MN 55113</span> | <span class="appleLinksWhite" style="color: #ffffff;">1.800.745.9649</span></td>
</tr>
</tbody>
</table>
Any suggestions appreciated. Thanks,
Douglas, I tried to add an image but it says I need at least 10 reputation to post it, and I only have 1 now. The link to it is this http://identifix.skmgroupwork.com/email/iden074/images/snip.JPG
In litmus tests only on Outlook 2013 a strange white, not even aligned gap, to the right of the image that is not supposed to be there appears.
Following worked for me :
<td style="line-height:0px; mso-line-height-rule:exactly;">
Is this problem specific to Microsoft e-mail clients?
How does the e-mail look on web clients?
I have had a wide range of problems with 2013 and sometimes 2007. These are usually remedied by using the clandestine mso-specific css rules.
For example; using mso-line-height-rule:exactly; in inline css will resolve the particularly aggravating problem of Outlook 2013 pushing all tds < 15px out.
It is hard to isolate the problem within your code without seeing the rest of the code.
You should try not to use colspans to make it work in all clients like lotus notes 6.5 and 7