
1
Bulletproof Buttons not working in IE9?! HELP!
I was just informed that my nifty new buttons aren't working in IE9. They display fine, the cursor behaves as if they're an active link, but clicking on them doesn't do anything.
Here's my code:
> <!-- start Bulletproof Button -->
<tr>
<td style="background-color:#ffffff; text-decoration:none;">
<a href="http://www.hollandamerica.com/find-cruise-vacation/SpecialOffers.action?destCode=P&WT.mc_id=email_%%PROJECT%%&WT.dcsvid=%%MARINER_ID%%&stop_mobi=yes" style="text-decoration:none;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding:12px 29px 12px 29px; -webkit-border-radius:4px; border-radius:4px; background-color:#182c46; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#ffffff;" align="center" valign="middle">Learn More →</td>
</tr>
</table></a>
</td>
</tr>
<!-- end Bulletproof Button -->
I appreciate any help, if I can't get this figured out quickly I'll have to make my buttons out of images again! :'(
At first blush, I would say that wrapping the table in the link could be the culprit. Generally speaking, wrapping a block-level element (your table) in an inline element (the anchor tag) is bad practice. I'd start there and see if that helps. Just move that link to surround the 'Learn More' CTA and you should be good. If you want to have the entire button clickable (which I think is the intention), then you can either use the VML-based bulletproof buttons popularized by Campaign Monitor or use a border-based approach that our massively talented email designer Kevin came up with. You can read more about a few approaches here.
Personally I would suggested a technique like this for HTML email buttons: http://mikevoermans.com/css/html-email-buttons
<a href="#" style="color: #ffffff; border-top: 10px solid green; border-bottom: 10px solid green; border-left: 25px solid green; border-right: 25px solid green; background: green; border-radius: 5px;">Button</a>
Using border to define the space around the button. You can still add in border radius or any other properties you wish.
Hope this helps.