I am trying to add a hyperlink button to an Email template I am making and for some reason when opening this email via Outlook the button is empty with boarders only and non of the graphic style included.
When opening this in a Web Browser everything looks fine even on Gmail, not sure where is the problem, I hope someone can help.
This is the code line for the button:
<div align="center" class="button-container center " style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:27pt; v-text-anchor:middle; width:129pt;" arcsize="17%" strokecolor="#59B5EB" fillcolor="#FFFFFF"><w:anchorlock/><v:textbox inset="0,0,0,0"><center style="color:#59B5EB; font-family:Roboto, 'Helvetica Neue', Helvetica, sans-serif; font-size:16px;"><![endif]-->
<div style="color: #59B5EB; background-color: #FF0000; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; max-width: 172px; width: 132px;width: auto; border-top: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; padding-top: 5px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; font-family: Roboto, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none;"><span style="font-size:18px;line-height:40px;">Join Team</span></div>
<!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]--></div>
This is an example of a button that will work in Outlook and other email clients:
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
<tr>
<td style="border-radius: 6px; background: #ff0000;">
Join Team
</td>
</tr>
</table>
Nearly everything in your code example will have issues with Outlook and other email clients.
For example, Outlook does not work well with <div>. Outlook does not work well with padding. Outlook will not work with Google fonts like Roboto or fonts with two names like Helvetica Neue. It's not going to work with rounded corners, so border-radius: 6px; will be ignored. Maybe arcsize="17%" will work, but I don't have to test it. I just wanted to give you a way to go forward.
Good luck.
Related
I am trying to create a buttoon centered vertically in Outlook, I am using a code that another developer worked on, and trying to re-adapt it
in the code I am trying to set fixed values to avoid any issues but in outlook it displays extra space
in Outlook web, mobile, Gmail, browsers, etc, this is good and expected :
in Outloook Desktop :
This is the logic I am setting witgh my html code :
Border with 1 px and two spacers rows with 8px, and text container with line-height: 18px; ..
This is my HTML
<tr>
<td valign="middle" style="padding: 0px; vertical-align: middle;height:35px;" align="center" height="35">
<table
style="border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: none;height:35px;"
cellspacing="0" cellpadding="0" border="0" height="35">
<tr>
<td valign="middle" border="1" class="borders" dir="ltr"
style="padding: 0px; vertical-align:middle; border: 1px solid #4E4E4E; border-image: none; width: 220px; height: 34px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; vertical-align: middle; background-color: #EBEBEB;"
bgcolor="#303335" align="center" height="34">
<table
style="border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: none;"
cellspacing="0" cellpadding="0" border="0">
<tr>
<td dir="ltr"
style="padding: 0px; border-image: none; width: 220px; height: 8px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; background-color: #ffffff;vertical-align: middle;"
valign="middle" height="8" bgcolor="#ffffff" align="center">
</td>
</tr>
<tr>
<td dir="ltr"
style="padding: 0px; border-image: none; width: 220px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; line-height: 18px; font-size: 15px; background-color: #EBEBEB;vertical-align: middle;"
valign="middle" bgcolor="#303335" align="center">
<a href="%%=RedirectTo(CONCAT( TreatAsContent(#contentblock_link), '&utm_clickposition=cta', TreatAsContent(#contentblock_link_anchor)))=%%"
style="color: #4B4B4B ; text-transform: uppercase; vertical-align: middle; line-height: 18px; letter-spacing: 0.5px; font-family: "HelveticaNeueLight", Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; display: inline-block; ">%%=Field(#campaign_input_data,
concat(#contentblock, '_cta'))=%%</a>
</td>
</tr>
<tr>
<td dir="ltr"
style="padding: 0px; border-image: none; width: 220px; height: 8px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; background-color: #ffffff;vertical-align: middle;"
valign="middle" height="8" bgcolor="#ffffff" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
It looks like your third row is expanding. I believe what is happening is Outlook is inserting a blank paragraph - though why that is not happening in the first row too is a mystery.
To ensure the right height for a blank row (in between the <td>'s), use the following construction:
<p style="margin:0;padding:0;font-size:8px;line-height:8px;"> </p>
Also ensure there are no spaces in between the <td>'s. I would use that on both the top and bottom row, for consistency. (Once you do this, you don't need the height: 8px; in the <td> style.)
I was wondering if it is possible to do the border with the same padding as the button above. The solution might seem like it is when I add the border to the td but I can not do that because in other client the border has border-radius which is not visible here. Any ideas? Thanks
code for the second button:
<!-- BUTTON -->
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="fluid"
role="presentation" width="600">
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 0 0 40px 0;"
valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0"
class="main-button-mob-width" role="presentation"
style="max-width: 80%; min-width: auto;">
<tr>
<td align="center" bgcolor="#ffffff"
class="out-main-button-padding"
style="border-radius: 50px; padding: 0; font-family:
'Arial Black', Gadget, Arial,
Helvetica, sans-serif; font-size: 18px; font-weight: bold;
line-height: 22px; mso-text-raise: 4px;"
valign="top">
<a class="out-main-button-a"
href="#" style="display: block;
border-radius: 50px; background-color: #ffffff;
border: 3px solid #061539;
mso-border-alt: 8px solid #061539;
padding: 15px 35px 15px 35px; mso-padding-alt: 4px;
color: #061539; text-decoration: none;"
target="_blank" title="">
<span style="color: #061539; text-decoration: none;
background-color: #ffffff">INVITA A TUS AMIGOS
</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- BUTTON end -->
In Outlook you cannot change an inline element such as <a> to a block element (display:block). So it ignores padding, margins and such because these are block element styles.
Therefore, for cross-email compatibility, you either need to put padding on the <td> (which doesn't extend the clickable part, but only makes it look like the button is bigger, or, you can apply a hack as described by Mark Robbins.
Solution 1: (Easiest) TD button
<td align="center" bgcolor="#ffffff"
class="out-main-button-padding"
style="border-radius: 50px; padding: 15px 35px 15px 35px;
border-radius: 50px; background-color: #ffffff;
border: 3px solid #061539;
mso-border-alt: 8px solid #061539;
mso-padding-alt: 4px; font-family:
NIVEaBrandType-Bold, 'Arial Black', Gadget, Arial,
Helvetica, sans-serif; font-size: 18px; font-weight: bold;
line-height: 22px; mso-text-raise: 4px;"
valign="top">
<a class="out-main-button-a"
href="https://nivea.com" style="display: block;
color: #061539; text-decoration: none;"
target="_blank" title="">
<span style="color: #061539; text-decoration: none;
background-color: #ffffff">INVITA A TUS AMIGOS
</span>
</a>
</td>
All I've done is move the block-level styles from the <a> to the <td>. You can still leave the display:block on the <a> to make the clickable area bigger for those email clients that support this.
Solution 2: Mark Robbin's A button
<a href="https://example.com/" style="background: #333; border: 2px solid #f00; text-decoration: none; padding: 15px 25px; color: #fff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#333"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden> </i><![endif]--><span style="mso-text-raise:15pt;">Link Text</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%" hidden> </i><![endif]-->
</a>
Change the left and right padding by changing the letter-spacing value (on the left and right of the link text).
Change the bottom padding by changing the mso-text-raise value in the <span>.
Change the top padding by changing the mso-text-raise value in the <i>.
(Detailed explanation on https://www.goodemailcode.com/email-code/link-button)
The first span with border 1px solid #333; not showing in outlook 365, but showing in outlook live and gmail. I've tried outline and box-shadow as well it's not working in any way.The first span with border 1px solid #333; not showing in outlook 365, but showing in outlook live and gmail. I've tried outline and box-shadow as well it's not working in any way.I
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style=" mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; border-spacing: 0px; ">
<tr>
<td align="right" style="padding: 0; margin: 0">
<span class="es-button-border" bordercolor="#333" border="1" style=" mso-border-right-alt: 1px solid #333333; mso-border-bottom-alt: 1px solid #333333; mso-border-left-alt: 1px solid #333333; mso-border-top-alt: 1px solid #333333; border-style: solid; border-color: #333333; border-width: 1px; border: 1px solid #333333; display: inline-block; border-radius: 0px; width: auto; ">
<span class="es-button" target="_blank" style=" mso-style-priority: 100 !important; text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-size: 12px; border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px; display: inline-block; background: #fff; border-radius: 0px; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; line-height: 14px; width: auto; text-align: center; " >
<span id="price1">Per person:</span>
INR 98298 (CHF 1192)
</span>
</span>
</td>
</tr>
</table>
The problem is you're using a span as a block element, which it isn't naturally and on top of that - trying to force it with the use of display:inline-block won't always work in Outlook clients.
Your best bet is to use block level elements for borders. These include: table cells & divs.
You could convert all of your span tags to divs to make this work, however because divs are block elements, they'll go full width by default.
You can define widths to fix this, however Outlook won't respect those without mso specific code.
Below is your code and then the row below that is what I'd do:
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style=" mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
<tr>
<td align="right">
<span class="es-button-border" style="border: 1px solid #333333; display: inline-block;">
<span class="es-button" style="mso-style-priority: 100 !important; text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-size: 12px; border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px; display: inline-block; background: #fff; border-radius: 0px; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; line-height: 14px; width: auto; text-align: center;">
<span id="price1">Per person:</span>INR 98298 (CHF 1192)
</span>
</span>
</td>
</tr>
<tr>
<td style="padding-top:10px;">
<table align="right" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #333333;">
<tr>
<td class="es-button-border" style="text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 12px; line-height: 14px; text-align: center;">
<div style="border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px;">
<span id="price1">Per person:</span>INR 98298 (CHF 1192)
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
I try to hide or remove a border that is displayed between 2 call-to-actions in Outlook 2007.
This border isn't displayed over the background image of my email but appears over the background color in Outlook 2007 (Outlook doesn't support the bg img) and I'v tried many things to put it off.
Here is the screen :
http://i.stack.imgur.com/vC5cV.gif
And this is my source code for this part :
<table class="table-inner" width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td data-link-style="text-decoration:none; color:#FFFFFF;" align="center" height="36" style="border-radius: 20px; border: 2px solid #FFFFFF; padding-left: 15px; padding-right: 15px; font-family: 'Open Sans', Arial, sans-serif; color: #ffffff; font-size: 14px; font-weight: bold; background-color: rgb(1, 119, 181);">
<a href="" style="color:#FFFFFF;" target="_blank">
Link 1
</a>
</td>
<td width="25">
</td>
<td align="center" height="36" bgcolor="#5eaade" style="border-radius: 20px; border: 2px solid #FFFFFF; padding-left: 15px; padding-right: 15px; font-family: 'Open Sans', Arial, sans-serif; color: rgb(255, 255, 255); font-size: 14px; font-weight: bold; background-color: rgb(94, 170, 222);">
<a href="" style="color:#ffffff;" target="_blank">
Link 2
</a>
</td>
</tr>
</tbody>
Please help me to remove this awful "bottom" line between the 2 buttons ?
Regards
Fixed !
In the css head I changed :
table td{
border-collapse:collapse;
}
for :
table td{
border-collapse:separate;
}
But 2 other buttons below did not display correctly anymore... So I forced a :
style="border-collapse:collapse;"
directly in their <td> code.
:)
I am developing a newsletter template. Works well on Outlook2007 but on iPhone I still have some issues. With the following code I try to create a teaser block which contains an image and a text-block (made of a title and a text). In my intent, the text-block should not be higher than the image next to it. In iOS (Apple Mail) an annoying space is added between the title. Anyway idea about how to get rid of it?
<table border="0" cellpadding="0" cellspacing="0" class="teaser" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; cursor: pointer; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w480 normal-text" height="29" width="92" border="1" valign="top" align="left" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;">
<img src='testImage.jpg' alt='' />
</td>
<td width="298" valign="top" style="color: #6f6f6f; border: #6f6f6f;">
<h1 style="font-family: arial; font-size: 12px; font-weight: bold; line-height: 15px; vertical-align: top; text-transform: uppercase; margin: 0px; padding: 0px;">
<a href="http://www.lyra.net/fabio" target="blank" style="color: #6f6f6f; line-height: inherit; text-decoration: none; position: relative; letter-spacing: 0.03em; top: -2px; margin: 0px; padding: 0px; border: 0px;">
Quias alitatem <br />qui cullat
</a>
</h1>
<p class="normal-text no-overflow" style="font-size: 12px; line-height: 15px; overflow: hidden; margin: 4px 0px 0px;">
WeeeeFFFFr? Quias alitatem qui cullat lique num et molor sitempo rionse.
</p>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td height="52" width="0" style="color: #6f6f6f; border: #6f6f6f;"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
P.S. I see there are already similar posts, but as they didn't receive any interesting answer and the markup one uses also makes the difference I decided to post a new questions. I would also love to post screenshots of the problems but it is only possible with reputation > 10
On the table cell of the image, add this: valign="top". It will force the content to the top. In email this works consistently unlike css vertical-align.
Also, <h1> and <p> tags are best to avoid for consistency. <font> tags work best in email.