Duicug
Reputation: 109
Button in Outlook doesn't show correctly
It works in any other email client except Outlook. Any idea how to make it work in Outlook too?
This is how it looks in Outlook:
<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body style="font-family:'Roboto Condensed', Arial, Sans-Serif;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;margin:0;padding:0;min-height:1000px;color:#333333;background:#ffffff;font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased;width:100% !important;"><table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> </td> </tr> </tbody></table> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> <meta name="referrer" content="no-referrer"> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test newsletter</title> <!--[if mso]> <style type="text/css"> body, table, td, span, p, a, h1,h2,h3,h4,h5 {font-family: Arial, sans-serif !important} </style> <![endif]--> <style type="text/css"> /* Forces Hotmail to display normal line spacing. */ .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;} /* Resets all body margins and padding to "0" for good measure. */ /* Resolves the Outlook 2007, 2010, and Gmail td padding issue. */ div[style*="margin: 16px 0"] { margin:0 !important; } /* What it does: Stops Outlook from adding extra spacing to tables. */ table, td { mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; } /* What it does: Stops iOS links in blue and underlined */ a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important;} @media screen and (max-width:480px) { .no_mobile{ display:none; width:0; height:0; opacity:0; visibility: collapse; } } </style> <style type="text/css">div.preheader { display: none !important; } </style><div class="preheader" style="font-size: 1px; display: none !important;">With insulated cycle, run & outdoor kit.</div> <!-- Google Script --> <div itemscope="" itemtype="http://schema.org/EmailMessage"> <div itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization"> <meta itemprop="name" content="test"> <link itemprop="url" href="http://www.test.co.uk"> <link itemprop="url/googlePlus" href="https://plus.google.com/+test"> </div> <div itemprop="about" itemscope="" itemtype="http://schema.org/Offer"> <link itemprop="image" href="http://www.teststatic.com/images/email/google-promotions/google-promotions-test-road-image.jpg?x=1"> </div> </div> <!-- End Google Script --> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"> <table cellpadding="0" class="fullwidth2" cellspacing="0" align="center" width="600" style="width:600px; background-color:#ffffff; table-layout: fixed;"> <tbody><tr> <td align="center" width="600" style="width:600px;"> <span style="color:#3c3c3b; overflow:hidden; font-family:'Roboto Condensed', arial, sans-serif; font-size:11px; line-height:20px; font-weight:normal; text-align:center;"><a href="https://view.emails.test.com/?qs=938517e6ba3b066d98a000b3a4c164a41ea1086cf1850602d9c6689e2a32b167a715dee6ae1e91a1af68a50e1442f5e1bbf907e2ca37ae299bb33f64cd930b40" alias="Web Version" target="_blank" style="font-size:11px; color: #959595; text-decoration: none;">Trouble viewing this email? View in browser</a></span> </td> </tr></tbody></table> <!--end - view online--> <!-- White divider --> <!--header logo--> <!--end header-logo--> <!-- White divider --> <!--navigation end--></td></tr></tbody></table> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"></td></tr></tbody></table> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"></td></tr></tbody></table> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><!--core content--> <!-- White divider --> <table class="fullwidth" style="width:600px;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="15" style="height:15px; background-color:#ffffff;"></td></tr></tbody></table></td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23688&ris=1&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=Cycle_1#product-list"></a> </td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23546&ris=1&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=Cycle_2#product-list"></a> </td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23637&ris=1&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=Run_1#product-list"></a> </td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23554&ris=1&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=Run_2#product-list"></a> </td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23631&ris=1&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=Swim_1#product-list"></a> </td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23666&ris=1&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=Swim_2#product-list"></a> </td></tr></tbody></table> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><!-- UK Content Start --> <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto; "> <tbody><tr> </tr></tbody></table> <!--core content--> <table class="fullwidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-spacing:0;width:600px;margin:0 auto; width:600px; background-color:#f5f5f5;"> <tbody><tr> <td style="border-collapse:collapse;"> <a target="_blank" href="http://www.test.co.uk/black-friday?ris=1&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=BF-app"></a> </td> </tr> </tbody></table> <!-- White divider --> <table class="fullwidth" style="width:600px;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="15" style="height:15px; background-color:#ffffff;"></td></tr></tbody></table> <!-- UK Content End --> </td></tr></tbody></table> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><!-- UK Content Start --> <table class="fullwidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-spacing:0;width:600px;margin:0 auto; width:600px; background-color:#f5f5f5;"> <tbody><tr> <td style="border-collapse:collapse;"> <a target="_blank" href="https://www.test.co.uk/garmin-edge-520-plus-gps-cycle-computer?utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=Deal_2#product-list"></a> </td> </tr> </tbody></table> <!-- UK Content End --></td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://guides.test.co.uk/innovative-insulation-cycling-explained?utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=blog"></a> </td></tr></tbody></table> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"></td></tr></tbody></table> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><!-- UK Content Start --><!-- UK Content End --></td></tr></tbody></table></td></tr></tbody></table> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><!-- Fist column--><strong></strong><table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;border-spacing:0px;table-layout:fixed!important;width:100%"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><table width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="border-collapse:collapse;border-spacing:0px;background-color:#ffffff"><tbody><tr style="border-collapse:collapse"><td align="left" style="Margin:0;padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><a href="https://www.test.co.uk/dhb-classic-bib-shorts-1?sku=100420200&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=dhb Classic Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:underline;color:#2cb543" target="_blank"><img src="https://i.ibb.co/DpJ9n2B/1.png" alt="" style="display:block;border:0;outline:none;text-decoration:none" width="270"></a></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellspacing="0" cellpadding="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><a href="https://www.test.co.uk/dhb-bib-shorts-1?sku=100330314&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=dhb Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:underline;color:#2cb543" target="_blank"><img src="https://i.ibb.co/DpJ9n2B/1.png" alt="" style="display:block;border:0;outline:none;text-decoration:none" width="270"></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0;padding-top:20px;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><p style="Margin:0;font-size:14px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#111812"><strong><a style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:none;color:#111812" href="https://www.test.co.uk/dhb-classic-bib-shorts-1?sku=100420200&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=dhb Classic Bib Shorts" target="_blank"> Product 1</a></strong></p></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><p style="Margin:0;font-size:14px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#111812"><strong><a href="https://www.test.co.uk/dhb-bib-shorts-1?sku=100330314&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=dhb Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:none;color:#111812" target="_blank">Product 2</a></strong></p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0;padding-top:10px;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><p style="Margin:0;font-size:16px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#333333"><strong><a href="https://www.test.co.uk/dhb-classic-bib-shorts-1?sku=100420200&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=dhb Classic Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:16px;text-decoration:none;color:#111812" target="_blank">£50.00</a></strong></p></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><p style="Margin:0;font-size:16px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#111812"><strong><a style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:16px;text-decoration:none;color:#111812" href="https://www.test.co.uk/dhb-bib-shorts-1?sku=100330314&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=dhb Bib Shorts" target="_blank">£35.00</a></strong></p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0;padding-top:10px;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><a href="https://www.test.co.uk/dhb-classic-bib-shorts-1?sku=100420200&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=dhb Classic Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:underline;color:#2cb543" target="_blank"><img src="https://i.ibb.co/mzGR8xX/4-5.png" alt="" style="display:block;border:0;outline:none;text-decoration:none" width="130"></a></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><a href="https://www.test.co.uk/dhb-bib-shorts-1?sku=100330314&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=dhb Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:underline;color:#2cb543" target="_blank"><img src="https://i.ibb.co/mzGR8xX/4-5.png" alt="" style="display:block;border:0;outline:none;text-decoration:none" width="130"></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0"><p style="Margin:0;font-size:14px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#999;text-align:center">(563)</p></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0"><p style="Margin:0;font-size:14px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#999;text-align:center">(413)</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:10px;Margin:0"><span style="border-style:solid;border-color:#2cb543;background:#3c3c3b;border-width:0px;display:inline-block;border-radius:5px;width:auto"><a href="https://www.test.co.uk/dhb-classic-bib-shorts-1?sku=100420200&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=dhb Classic Bib Shorts" style="text-decoration:none;font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:12px;color:#fff;border-style:solid;border-color:#3c3c3b;border-width:15px 25px;display:inline-block;background:#3c3c3b;border-radius:5px;font-weight:normal;font-style:normal;line-height:14px;width:auto;text-align:center" target="_blank">SHOP NOW</a></span></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:10px;Margin:0"><span style="border-style:solid;border-color:#2cb543;background:#3c3c3b;border-width:0px;display:inline-block;border-radius:5px;width:auto"><a href="https://www.test.co.uk/dhb-bib-shorts-1?sku=100330314&utm_source=3728gb-46-wed&utm_medium=email&utm_campaign=cycle-segment&utm_content=dhb Bib Shorts" style="text-decoration:none;font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:12px;color:#fff;border-style:solid;border-color:#3c3c3b;border-width:15px 25px;display:inline-block;background:#3c3c3b;border-radius:5px;font-weight:normal;font-style:normal;line-height:14px;width:auto;text-align:center pad" target="_blank">SHOP NOW</a></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><!-- // END BODY --><pre><span style="font-size:9px;"></span></pre><!-- // END TEMPLATE --></td></tr></tbody></table> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"> <!-- White divider --><table class="fullwidth" style="width:600px;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="0" style="height:0px; background-color:#ffffff;"></td></tr></tbody></table><!-- Start footer --> <table bgcolor="#3b3b3c" cellspacing="0" cellpadding="0" class="fullwidth" style="border-spacing:0;width:600px;margin:0 auto;width:600px;" border="0" align="center"> <tbody><tr> <td> <table class="fullwidth" style="border-spacing:0;width:600px;margin:0 auto;width:600px;" cellpadding="0" cellspacing="0" border="0" align="center"> <tbody> <tr> </tr> </tbody> </table> <!--social media icons--> <!-- White divider --> <table class="fullwidth" style="border-spacing:0; width:600px; margin:0 auto; width:600px;" cellpadding="0" cellspacing="0" border="0" bgcolor="3b3b3c" align="center"> <tbody><tr> </tr> </tbody></table> <!--end social media icons--> <!--App store icons--> <table border="0" class="fullwidth" style="border-spacing:0; width:600px; margin:0 auto; width:600px;" cellpadding="0" cellspacing="0" bgcolor="#3b3b3c" align="center"> <tbody><tr> </tr> </tbody></table> <!-- White divider --> <table bgcolor="#3b3b3c" class="fullwidth" style="border-spacing:0;width:600px;margin:0 auto;width:600px;" cellpadding="0" cellspacing="0" border="0" align="center"> <tbody> <tr> </tr> </tbody> </table> <!-- footer t&cs--> <!--end footer t&cs--> <!-- White divider --> <table class="fullwidth" style="border-spacing:0;width:600px;margin:0 auto;width:600px;" bgcolor="#3b3b3c" cellpadding="0" cellspacing="0" border="0" align="center"> <tbody> <tr> </tr> </tbody> </table> </td> </tr> </tbody></table> <!-- Device Pixel --></td></tr></tbody></table> </td> </tr> </tbody></table><!-- end banner --></body></html>Upvotes: 0
Views: 2011
Answers (2)
Ted Goas
Reputation: 7587
Aye, as Bidstrup noted, Windows Outlook doesn't support border-radius and has poor support for the box model in general. IMO your Outlook screenshot looks pretty good to me!
At Stack Overflow, we code our email buttons like so:
<td style="border-radius: 4px; background: #0095ff; text-align: center;">
<a href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">
…
</a>
</td>
But we know that things like border-radius and box-shadow fail silently in Outlook and we're ok with that.
Upvotes: 2
Bidstrup
Reputation: 1617
Outlook dosnt support border-radius and has poorly supports of border-width.
You can see the mail client support list here border-radius and border-width
So either you have to change your code a bit so you keep the spacing around the text (with padding), but then no round corners. Or you can use this service for nice buttons
Upvotes: 2
Related Questions
- Button is overlapping the text in Outlook for Windows emails
- Button background in outlook web client not showing - HTML email development
- Display CSS button in Outlook
- Html emails <hr> styling issue on Outlook?
- CSS button out of place over background image in HTML email template in Outlook
- HTML Email - button has no padding on outlook
- Button looks awful in Outlook
- Button Text Alignment in Outlook.com
- Outlook is not respecting my "button" background color
- Outlook 2016 button image displays wrong