Im having an issue with my button on outlook web client. It works on most other clients I have tried even outlook just not the web version.
I have even used a bulletproof button and it still doesn't show that background color.
Is there any solution to this or can it not be done?
My button:
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#fa2951" fillcolor="#f52432">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
</v:roundrect>
<![endif]--><a href="http://testing"
style="background-color:#f52432;border:1px solid #fa2951;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</a></div>
Not sure but I think that is because your url is not correct.
I just spent one hour fighting against the same issue then changed my href to a random http://google.com and outlook finally print the button.
Related
Trying to send an email with a fake checkbox which works on gmail but broken when receive with outlook
<td style="width: 18px; text-align: center; height: 33px;"><span style="font-size: 18px; color: #000000;"><input id="Practice Account" name="interest" type="checkbox" value="Practice Account" /> <label for="Practice Account">Practice Account</label></span></td>
on Gmail: gmail
on Outlook: outlook
Anyone knows what's missing in the html? or if its even possible to fix?
Thanks in advance.
Microsoft Outlook has zero support for styling lists - so no using images for bullets or even declaring a specific list-style-type for Outlook readers. So a checkbox in a form is not going to work.
https://litmus.com/community/learning/8-outlook-overview
What you could do is to place the form on a web page for people with Outlook. Build the form in email for modern email clients, then wrap it in a conditional statement which hides it from Outlook:
<!--[if !mso]>
*survey form*
<![endif]-->
Create a second conditional specifically for Outlook:
<!--[if (gte mso 9)|(IE)]>
*A link to a web page for Outlook users*
<![endif]-->
Now the form can be used by most of the popular email clients in use.
Good luck.
What do I need?
I need to make all content of the email into a single A4 size Page.
CSS
<body style="height:297mm;width:210mm;margin-left:auto;margin-right:auto">
----email content---
</body>
when i try to viewsource email css property were already there.
Problem
when try to print from ms outlook then html content move in 2 page of which my need is 1 page.
working css in browser
when i try to print the same content from browser then im able to get html content in A4 size page.
can anyone suggest how to shrink all content into single a4 size page.
any suggestion is most welcome.
Stop looking for a reason : mail clients are very though regarding CSS properties.
When you write an e-mail, almost no CSS property is accepted.
You can find an exhaustive list here.
After having played around with it a little bit, I can tell you that the best option to send a formatted mail is to create a table and style this table with inline styling.
Good luck with that, you will need it.
I suggest you to write styles in pixels. I have a such big experience in Email markup and Microsoft Outlook really harmful.
And Im not sure that margin: auto will work properly in Outlook.
So, try to write for example:
<body style="height:500px;width:500px;">
The Solution that worked for me In Ms Outlook.
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-
microsoft-com:office:word" href="http://" style="yourstylinghere;"
stroke="f" fillcolor="#556270">
<![endif>
your content
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
I realise this has been asked many times before so apologies if I'm repeating myself but having followed many other tips on this I'm getting some weird behaviours in Gmail.
If I open the below code in a browser, copy it and then paste it into a Gmail sig (via Settings) the text respects the text-decoration attribute (I'm using the span and !important as advised by other posts).
I can now create/send emails and the styling is respected.
But if I quit Gmail and then log-in again, the text-decoration:none styling is suddenly ignored. The only way to 'repair' is to copy/paste the sig back in again (via Settings).
I'm wondering if something has changed in Gmail as I've been using this sig for a good year or so and it's only recently that I've noticed this behaviour.
Anybody else experienced this (or can see anything wrong with my code)?
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="0" style="font-family:'Lucida Grande','Lucida Sans','Lucida Sans
Unicode';font-size:12px;margin:0px">
<tr>
<td>
<a href="http://maps.google.com?q=Mainframe North" target="_blank" style="text-decoration:none !important;color:rgb(180,180,180);">
<span style="text-decoration:none !important;color:rgb(180,180,180);">
82 Silk Street<br>Manchester M4 6BJ
</span>
</a>
</td>
</tr>
</table>
</body>
Updated code as per comments below:
<table width="98%" border="0" cellspacing="0" cellpadding="0" style="font-family:'Arial';font-size:12px;margin:0px;color:#B4B4B4">
<tr>
<td>
<a href="http://maps.google.com?q=Mainframe North" target="_blank" style="text-decoration:none">
<span style="text-decoration:none;color:#B4B4B4">
82 Silk Street<br>Manchester M4 6BJ
</span>
</a>
</td>
</tr>
</table>
The issue is a bug with Google's fork of Webkit Layout Engine, Blink. When just viewing the Gmail Settings page in Chrome, the "text-decoration:none" style tag is completely removed from your signature permanently.
I found a hack to fix this issue though:
Either paste your HTML signature into Gmail Settings using any other browser,
or do the following:
Right-click the underscored element in your signature and inspect
In the inspection window, add the "text-decoration:none" back into your style attribute
Introduce a text change in the signature like a space so that the "Save Changes" button activates.
Save your changes.
Voila, no more underscores ever (or at least until you change your signature once again).
Use text-decoration: unset;
This issue still exists in Gmail and since most browsers are now Chromium-based, using "another browser" generally presents the exact same issue.
Adding text-decoration: none; via Inspect Element and making a minor change to enable "Save Changes" still works.
Alternatively, use text-decoration: unset; instead and paste the signature into Gmail. Gmail doesn't remove text-decoration: unset; and the signature loads without links underlined.
It seems adding and saving my signature in Gmail via Safari (rather than Chrome) fixed my issue.
I need to make a rounded button for a newsletter, the HTML code is insert in a web base tool used for newsletter
most of the contents are ok but a yellow button with rounded corner on windows 10 mail client lose the rounding and the padding
I try to use different tags like button or change to display block and use the prefixed css style without any success
If is not possible i we will use some images
<p><span style="display:inline-block; background-color:#ffce00; padding: 10px 45px; border-radius:20px; color: #000; font-weight: bold;">Click</span></p>
you can try something like this below (I've tested successfully this type of code in MS outlook), the trick is the VML attribute arcsize
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="f" fillcolor="#ff0000">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#ff0000;border-radius:20px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Click</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
Source and Generator
Getting CSS to appear correctly in mail clients is a bit of a pain. When I was doing this type of work we used this compatibility chart before we made formatting decisions.
[https://www.campaignmonitor.com/css/]
Another good tool is Litmus to check formatting between clients is Litmus.
[https://litmus.com/]
Wish I had a better answer for you, hope this helps.
working on an e-mail template i noticed outlook and outlook.com strips out "margin", my solution is to add additional line for those clients like
<td height="20" valign="top"> </td>
but i would like to use margin on supported clients, so i put this in a conditional block
<!--[if mso]>
<td height="20" valign="top"> </td>
<![endif]-->
Anyone knows if ALL versions of outlook are stripping out margin or is it just some of them (newer ones?)? I read Microsoft dropped support for margin, but I didn' find any information in which version it was dropped.
do i have to use additional condition to avoid older versions of outlook rendering margin like
<!--[if (gte mso 12)]>
to only affect 2007+ for example?
Don't do that -- the idea is you find a solution for the margin that resolves everywhere your supporting. Do not hack or try to condition an email!
margin is not supported in Outlook but, padding is, so use padding!
There is also additional reach arounds you could utilize such as nesting additional tables or using small white images to recreate the space. There is always a solution that you can use across - your email will be much more stable if you find it instead of trying to hack with conditionals.
Also this is a decent reference.
Specific to outlook 2007 info.
But if you really must (sigh).. it is possible; the below is targeting Outlook 2007 specifically:
<!--[if gte mso 12]>
<style type="text/css">
/* Your Outlook-specific CSS goes here. */
</style>
<![endif]-->
the mso 9 correlates with outlook 2007 below is a list of more:
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
Read More about this.
Note: While this is possible, I still suspect using these will create more problems in the long wrong.
Good luck!
As per the EmailonAcid Article Outlook.com DOES Support Margins.
The fix for this is ridiculously simple. All you have to do is capitalize the "M" in Margin. That's right, changing all of your "margin" to "Margin" will cause them to work properly in Outlook.com.