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.
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 understand that in order to display outlook-specific HTML within an email I can implement code such as:
<!--[if (gte mso 9)|(IE)]>
Welcome to the newsletter.
<![endif]-->
However, how do I implement if/else logic. For example, without using CSS classes, I need to display one section of content in Outlook and a completely different section of content in other clients.
Is this possible?
(CSS Classes have proven to be unreliable hence my requirements for conditional HTML instead).
The conditional coding IS actually the IF/ELSE statement. The issue is the ELSE part is not built in. To solve your issue, you need something to hide the content you no longer want MSO to use but show up in all other clients.
This can be handled either through conditional classes (in the if statement) OR, as you mentioned you did not want to use classes, you can use the mso-hide:all css that is only recognized by Microsoft office.
Found a great example of this for reference. Pulled from this post:
<!--[if mso]>
<v:shape>...</v:shape>
<div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->
[fallback goes here]
<!--[if mso]></div><![endif]-->
This is a good reference on usage of mso-hide:all
<td width="110" align="center" valign="top" style="color:#000000;">
<a href="https://example.com" target="_blank"
style="color:#000000; text-decoration:none;">BOOK NOW
</a>
</td>
I used this code to make a link in my HTML email. In browsers and Outlook it's working nicely, but in GMail, Hotmail, and ymail it shows links underlined.
Can anyone help me to get rid of this?
BOOK NOW
Outlook will strip out the style with !important tag leaving the regular style, thus no underline. The !important tag will over rule the web based email clients' default style, thus leaving no underline.
I see this has been answered; however, I feel this link provides appropriate information for what formatting is supported in various email clients.
http://www.campaignmonitor.com/css/
It's worth noting that GMail and Outlook are two of the pickiest to format HTML email for.
After half a day looking into this (and 2 years since this question was opened) I believe I have found a comprehensive answer to this.
<font color="#000000"><span style='text-decoration:none;text-underline:none'>Link</span></font>
(You need the text-underline property on the span inside the link and the font tag to edit the colour)
Use !important in the text decoration rule.
BOOK NOW
Windows Mail seemed to outright ignore inline text-decoration tag but what fixed it for me was by adding this to the head:
<!--[if (mso)|(mso 16)]>
<style type="text/css">
body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
a {text-decoration: none;}
</style>
<![endif]-->
Another way to fool Gmail (for phone numbers): use a
~ instead of a
-
404-835-9421 --> 404~835~9421
It'll save you (or less savvy users ;-) the trip down html lane.
I found another way to remove links in outlook that i tested so far. if you create a blank class for example in your css say .blank {} and then do the following to your links for example:
<span class="blank" style="text-decoration:none !important;">Search</span>
this worked for me hopefully it will help someone who is still having trouble taking out the underline of links in outlook. If anyone has a workaround for gmail please could you help me tried everything in this thread nothing is working.
Thanks
I think that if you put a span style after the <a> tag with text-decoration:none it will work in the majority of the browsers / email clients.
As in:
<a href="" style="text-decoration:underline">
<span style="color:#0b92ce; text-decoration:none">BANANA</span>
</a>
I added both declarations on the a href which worked in outlook and gmail apps. outlook ignores the !important and gmail needs it. Web versions of email work with both/either.
text-decoration: none !important; text-decoration: none;
To completely "hide" underline for <a> in both mail application and web browser, can do the following tricky way.
<a href="..."><div style="background-color:red;">
<span style="color:red; text-decoration:underline;"><span style="color:white;">BUTTON</span></span>
</div></a>
Color in 1st <span> is the one you don't need, MUST set as same as your background color. (red in here)
Color in 2nd <span> is the one for your button text. (white in here)
Text decoration none was not working for me, then i found an email in outlook that did not have the line and checked the code:
<span style='font-size: 12px; font-family: "Arial","Verdana", "sans-serif"; color: black; text-decoration-line: none;'>
<a href="http://www.test.com" style='font-size: 9.0pt; color: #C69E29; text-decoration: none;'><span>www.test.com</span></a>
</span>
This one is working for me.
I used a combination of not showing links in google, adding links for mso (outlook) and the shy tag, to keep the looks and feels for my company. Some code may be redundant (for my company the looks where more important then the be clickable part. (it felt like a jigsaw, as every change brakes something else)
<td style="color:rgb(69, 54, 53)">
<!--[if gte mso 9]>
<a href="http://www.immothekerfinotheker.be" style="text-decoration:none;">
<span style="text-decoration:none;">
<![endif]-->
www.immothekerfinotheker.be
<!--[if gte mso 9]>
</a>
</span>
<![endif]-->
</td>
Hope this helps someone
All email clients adjust the HTML and the CSS code you provide by
their own rules:
e.g.: gmail removes everything but the inner HTML of the body tag.
1. for most other clients you can have a style-tag in your header
<style type="text/css">
a {text-decoration: none !important;}
</style>
note: don't use CSS comments as YAHOO!Mail might cause trouble.
2. to be on the save side add the same code inline into the A tag as you did and an extra span tag as well (the style rules in a tags get often removed)
<a href="" style="text-decoration: none !important;">
<span style="text-decoration: none !important;">
text
</span>
</a>
It wholly depends on the email client whether it wants to display the underline under the link or not. As of now, the styles in the body are only supported by:
Outlook 2007/10/13 +
Outlook 2000/03
Apple iPhone/iPad
Outlook.com
Apple Mail 4
Yahoo! Mail Beta
http://www.campaignmonitor.com/css/
Use text-decoration:none !important; instead of text-decoration:none; to make sure you "lose" the underline.
Here in http://www.campaignmonitor.com/css/, a nice explanation to say this is restricted! And a pretty nice guide to know all limitations of CSS in email clients.
You can do "redundant styling" and that should fix the issue. You use the same styling you have on the but add it to a that is within the .
Example:
<td width="110" align="center" valign="top" style="color:#000000;">
<a href="https://example.com" target="_blank"
style="color:#000000; text-decoration:none;"><span style="color:#000000; text-decoration:none;">BOOK NOW</span></a>
</td>
While viewing the html email try inspecting the element on that link and see what is overwriting it. Use that class and define it that style again in your head style and define the text-decoration: none !important;
In my case these are the classes that are overwriting my inline style so declared this on the head of my html email and defined the style that I want implemented.
It worked for me, hope it will work on your one too.
.ii a[href]{
text-decoration: none !important;
}
#yiv8915438996 a:link, #yiv8915438996 span.yiv8915438996MsoHyperlink{
text-decoration: none !important;
}
#yiv8915438996 a:visited, #yiv8915438996 span.yiv8915438996MsoHyperlinkFollowed{
text-decoration: none !important;
}
Code like the lines below worked for me in Gmail Web client. A non-underlined black link showed up in the email. I didn't use the nested span tag.
<table>
<tbody>
<tr>
<td>
Peter Blog
</td>
</tr>
</tbody>
</table>
Note: Gmail will strip off any incorrect inline styles. E.g. code like the line below will have its inline styles all stripped off.
Peter Blog
I copied my html page and pasted to word.
Edited the signature in word deleting the spaces where the underline is placed and make my own "padding" presssing space bar.
Copied again and pasted to Outlook 2013.
Worked fine for me.
In Windows 10 Mail, you might need to add these in your html head:
<!--[if (mso)|(mso 16)]>
<style type="text/css">
body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
a {text-decoration: none;}
</style>
<![endif]-->
The 'a {text-decoration: none;}' fixed the underline problems :)
In my case, I configured the signature (copy and paste in gmail) using Safari. I tried every code you putted here, but those didn´t worked. After you paste the signature using Safari, you can come back to Chrome and the underline is gone.
Using text-decoration: unset; inside the style of the element works for GMAIL
All you have to do is:
<a href="" style="text-decoration:#none; letter-spacing: -999px;">
place your "a href" tag without any styling before div / span of text.
then make your styling in the div/span tag.
for the most restricted styling email client.
<div><a href=""><span style="text-decoration:none">title</span><a/></div>
You should write something like this.
BOOK NOW