html - Identical links in Outlook Email - why does only one render as a valid URL? -


system i'm working on generates emails user. these created loading template , filling in placeholders in text appropriate information.

many of these emails feature link system website. presented in 2 forms: normal text underlined link , faux-button.

when have system send emails hotmail account, these both work. however, when same email gets sent outlook 2007, text link works. if hover on button shows blank url of "http://" which, if clicked, opens fresh browser window.

examining generated html, both links have valid destination.

<td width="160" align="center" valign="middle">      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="mobile_hide">         <tbody>           <tr>              <td width="560" align="left" valign="top" style="font-size:14px; color:black; padding-bottom: 80px;">please <a href="[valid link site, large querystring]" style="color: #009ddb; text-decoration: underline">choose new password here</a>.</td>           </tr>         </tbody>      </table>   </td>   <td width="280" align="center">      <table width="280" border="0" cellpadding="0" cellspacing="0" align="center">         <tr>            <td width="280" align="center" valign="middle" style="color: #ffffff; background-color:white; width:280px">                 <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:280px;" arcsize="63%" strokecolor="#32b8eb" fill="t">                     <v:fill type="tile" />                     <w:anchorlock/>                     <center style="color:black;font-size:16px;width:280px;font-family:calibri;">reset password now</center>                     </v:roundrect>                     <![endif]--><a href="[valid link site, large querystring]" style="border:1px solid #32b8eb; border-radius:25px;display:inline-block;font-size:16px;line-height:50px; text-align:center; text-decoration:none;height:50px;width:280px;-webkit-text-size-adjust:none;mso-hide:all;color:black;">reset password now</a>                 </div>        </td>     </tr>  </table> </td> 

why button email not being rendered correctly in outlook? can't blanket security feature text link works fine.

i'm taking wild guess second href 1 doesn't work. reason have 3 hrefs, 2 closing </a> tags. second 1 in outlook-specific code lacks closing tag , interferes withe bottom href.

<!--[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:280px;" arcsize="63%" strokecolor="#32b8eb" fill="t">   <v:fill type="tile" />   <w:anchorlock/>   <center style="color:black;font-size:16px;width:280px;font-family:calibri;">reset password now</center>   </v:roundrect> <![endif]--> 

specifically, it's line: <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:280px;" arcsize="63%" strokecolor="#32b8eb" fill="t">

close or remove statement in outlook code. it's doing nothing right except interfering bottom href. bottom href should start work.

good luck.

edit

the outlook-specific href gets closed </v:roundrect>. </a> not needed. think code comes https://buttons.cm. expected behavior place url button graphic can use fallback, https://buttons.cm/button.jpg. since there no url , http://, think still caused issue outlook. if had code, test it, don't. wanted add fix experiencing similar problem better thought out solution.


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -