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.
Related
I'm using the following code to display a button to clients:
<table role="presentation" cellspacing="0" cellpadding="0" border="0"
style="border-collapse:collapse; background:#005984; width:auto;">
<tbody>
<tr style="height: 30px;">
<td style="height: 30px; padding: 5px 22px;">
<a class="button-a button-a-primary" href="https://google.in" target="_blank"
style="font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; color: #ffffff;">
Click Here to begin </a>
</td>
</tr>
</tbody>
</table>
Note: My application sends mails to clients, hence client opens the mail on multilple devices/browsers.
Due to security concerns, No idea as of now, on which environment this issue appearing, will be updated if as I get.
My client is seeing an extra checkmark next to the button:
I cannot reproduce with same html as above. But somehow the client can and has sent me the previous screenshot.
I'm very very new to html. I'm mostly copy-pasting bits of code as my framework and customizing it to make my emails work. I have this bit of code for my email, but I can't seem to get the opt-in button to center. I've tried reading other similar questions, but my knowledge of coding is that of a beginner, and I can't understand how their coding solutions, in which the code is slightly different, relates to my code to find a solution. I was adding style=text-align: center; in a few spots, but it wasn't working. There were other solutions, but I didn't quite understand how they would work in my code. I've been trying to fix this things for hours now. So very frustrated.
Other than the centering it works in the email.
<td valign="middle" style="text-align: center; padding: 0px 10px 10px
0px;">You've previously contacted us at Business Name. <br>We
are <b>only sending this email once</b> to our current client list to
invite you to join our new free monthly e-newsletter. <br>
style="text-align: center;
<table width="100%" cellspacing="0" cellpadding="0"><tbody><tr>
<td>
<table cellspacing="0" cellpadding="0">
<tbody><tr>
<td style="border-radius: 2px;" bgcolor="#018736">
<a href="https://www.businessname.com/community-
newsletter.html" target="_blank" style="padding: 10px 32px; border: 1px
solid #018736;border-radius: 2px;font-family: Helvetica, Arial, sans-
serif;font-size: 24px; color: #ffffff;text-decoration: none;font-
weight:bold;display: inline-block;">
OPT-IN
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>Grief is a difficult thing. If you choose not to join our free
monthly newsletter at this time we understand, but will not be sending
any other emails to you going forward. <br><br></td>
Use this code below:
<td valign="middle" style="text-align: center; padding: 0px 10px 10px
0px;">You've previously contacted us at Handsome Stitchery. <br>We
are <b>only sending this email once</b> to our current client list to
invite you to join our new free monthly e-newsletter. <br>
<table width="100%" cellspacing="0" cellpadding="0"><tbody><tr>
<td style="text-align:center;">
<table cellspacing="0" cellpadding="0" style="margin:0 auto;">
<tbody><tr>
<td style="border-radius: 2px;" bgcolor="#018736">
<a href="https://www.handsomestitchery.com/community-
newsletter.html" target="_blank" style="padding: 10px 32px; border: 1px
solid #018736;border-radius: 2px;font-family: Helvetica, Arial, sans-
serif;font-size: 24px; color: #ffffff;text-decoration: none;font-
weight:bold;display: inline-block;">
OPT-IN
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>Grief is a difficult thing. If you choose not to join our free
monthly newsletter at this time we understand, but will not be sending
any other emails to you going forward. <br><br></td>
Going off what you have, I think throwing style="text-align: center; on the <td> that your link button is in should do the trick. Also you might want to get rid of the other style="text-align: center; that is floating above the first tag, it is code that is showing up as text on your page.
The IMG src attribute is removed from tag and only ALT text is displayed in HTML email. Below is the container table from the banner that contains the image. This works fine when I display the HTML page in IE or Chrome. But when I run it through GoDaddy, the SRC attribute is deleted and the ALT text is not formatted as indicated in the IMG tag. How do I prevent this from happening?
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed; ">
<tr>
<td align="center" bgcolor="#efeac9" style="padding: 20px 0 0px 0;">
<div style="display: none; font-size: 1px; color:#efeac9; line-height: 1px; font-family: Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
This won't be shown in the design, but will be visible in the inbox preview.
</div>
<table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" bgcolor="#efeac9" class="logo">
<img src="Images/WP_Email_Banner.png" alt="Wisconsin Pollinators" height="252" width="600" border="0" style="display: block;
padding: 0; color: black; font-family: Arial, sans-serif; font-weight: bold; font-size: 24px; background-color: #efeac9;
-webkit-border-radius: 10px; border-radius: 10px;" class="fluid-image"/>
<!--<img src="Images/WP_Email_Banner.png" height="252" width="600" border="0" style="display: block; padding: 0;"/>-->
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style='font-family:Verdana; font-weight: bold; color:#943E58; font-size: 20px; line-height: 24px; padding: 15px 0px 15px 0' class="mobile-title-pad">
WELCOME TO<br />WISCONSIN POLLINATORS
</td>
</tr>
</table>
</table>
</table>
Thanks for your help!
I hope you speak for the following image tag:
<img src="Images/WP_Email_Banner.png" alt="Wisconsin Pollinators" height="252" width="600" border="0" />
First check if the filename is correct.
Then check if the path is correct. If your image folder is outside of your html page use the following format "../Images/WP_Email_Banner.png"
Finally try to upload your image to your ftp client and use the url link in the src atrribute (like http://yourwebsite.com/Images/WP_Email_Banner.png. Check again and if you have problems comment.
Remove extra options from image tag and try this
<img src="Images/WP_Email_Banner.png" alt="Wisconsin Pollinators" height="252" width="600" style="display:block;" />
And you also using css class. In email it will not work so use inline css as you are already using.
Please Upload the image on a public url and use its link as img tag's src value.
When you send an email with attachment, the HTML content does not have access to the file system, hence local images do not show up as you expect them to be shown. I faced this with Outlook web and solution was to host the images on public URL.
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>