4 ms·
Border-radius doesn't work in Outlook 2007/10/13. For me, that's a dealbreaker since a lot of traditional businesses use those clients.
by ameister14 13y ago
Border-radius doesn't work in Outlook 2007/10/13.
For me, that's a dealbreaker since a lot of traditional businesses use those clients.
- nathancahill 13y agoYeah, it's really going to suck for those traditional businessmen when they can't see the rounded corners on your buttons.
- eli 13y agoAh, but I have an answer for that! Take a look, I updated my post: http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/ http://www.industrydive.com/blog/how-to-make-html-email-butt... As terrible as Outlook's rendering engine is, it comes with a reliable way to target code to a client. So you make an Outlook-only button that only Outlook sees (and, bonus, are free to use Microsoft-only HTML extensions) and then a separate HTML version that Outlook is instructed to ignore. The code's ugly and annoying to work with, but it works!
- yuhong 13y agoYou may want to use <!--[if vml]> instead of <!--[if mso]>, and test the content with IE8 as well as Word.
- deleted 13y ago[deleted]
- yuhong 13y agoIn fact, just did a more complete version that works in IE too: <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"> <head> <!--[if !mso]> <style> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> <![endif]--> </head> <body> <div> <!--[if vml]> <v:roundrect href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroked="f" fillcolor="#d62828"> <w:anchorlock/> <v:textbox> <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;"> Button Text Here! </center> </v:textbox> </v:roundrect> <![endif]--> <!--[if !vml]> <!--> <table cellspacing="0" cellpadding="0"> <tr> <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;"> <a href="http://www.EXAMPLE.com/" style="color: #ffffff; font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block"> Button Text Here! </a> </td> </tr> </table> <!-- <![endif]--> </div>
- eli 13y agoInteresting! So this would be for rounded corners on IE8 or worse? (I think 9 supports border-radius, right?) Bummer that it requires adding styles to the head.
- deleted 13y ago[deleted]
- ameister14 13y agoHahaha, awesome. This is what makes me come back to the hn community time and time again. Thanks for the update.