{"id":3406,"date":"2017-08-08T01:24:28","date_gmt":"2017-08-08T01:24:28","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=3406"},"modified":"2017-08-11T05:16:38","modified_gmt":"2017-08-11T05:16:38","slug":"labels-with-images-may-not-be-clickable-in-internet-explorer","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/labels-with-images-may-not-be-clickable-in-internet-explorer\/","title":{"rendered":"Labels With Images May Not Be Clickable in Internet Explorer"},"content":{"rendered":"<p>If you&#8217;ve been experimenting with interactive email, you may find that carousels with image thumbnails may not trigger in Yahoo! Mail or AOL when viewed in Internet Explorer even though they <a href=\"https:\/\/freshinbox.com\/resources\/css.php\">support interactivity<\/a>. This is especially perplexing because the same email will work on Safari and Chrome.<\/p>\n<p>Thankfully there are workarounds that allow you put images within labels that will work in Internet Explorer. <\/p>\n<p>On the other hand if your interactivity is only enabled in non-Webmail clients (ie. only Webkit clients like iOS) you don&#8217;t have to worry about this issue.<\/p>\n<h3>Images in Labels<\/h3>\n<p>For some reason Internet Explorer does not like images within labels. When you click on an image within a label, instead of activating the checkbox or radio input that it is associated to, it will not do anything. <\/p>\n<p>This is a known Internet Explorer bug that has been <a href=\"https:\/\/stackoverflow.com\/questions\/20198137\/image-label-for-input-in-a-form-not-clickable-in-ie11\">around for a while<\/a>. <\/p>\n<h3>Solutions<\/h3>\n<h4>Drop the &lt;form&gt; tag<\/h4>\n<p>Interestingly, this problem does not occur if your interactive content is not wrapped in a &lt;form&gt; tag. So if you have form tags wrapping your interactive content, a solution is to simply remove them. However there are two downsides to this.<\/p>\n<p>Naturally the first is that you cannot submit the form &#8211; and if you are implementing a <a href=\"https:\/\/freshinbox.com\/blog\/shopping-in-email-add-to-cart\/\">shopping cart in an email<\/a>, this would not work.  The second downside is say you intend to use copies of an <a href=\"https:\/\/freshinbox.com\/resources\/tools\/carousel\/\">image carousel within an email<\/a>, you need to rename the input fields since they may interfere with each other now that they are no longer isolated with form elements.<\/p>\n<p data-height=\"500\" data-theme-id=\"12191\" data-slug-hash=\"KvWNQP\" data-default-tab=\"result\" data-user=\"freshinbox\" data-embed-version=\"2\" data-pen-title=\"Labels with images may not trigger in Internet explorer\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/freshinbox\/pen\/KvWNQP\/\">Labels with images may not trigger in Internet explorer<\/a> by FreshInbox (<a href=\"https:\/\/codepen.io\/freshinbox\">@freshinbox<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h4>Use background image<\/h4>\n<p>Instead of placing an image within the label, you could instead place the image as a background image in the label. This would allow you to click on the label containing the image and it would activate the input element it is associated with.<\/p>\n<p>Using background images allow you to keep the &lt;form&gt; tag around your interactive content.<\/p>\n<p><BR><BR><\/p>\n<div style=\"padding:10px; border: 2px solid #99C731;background-color:#FFF8DC;border-radius:5px;\">\n<form action=\"https:\/\/freshinbox1.createsend.com\/t\/i\/s\/adrmi\/\" method=\"post\" id=\"subForm\">\n<span class=\"fisub_header\" style=\"font-weight:bold;\">Subscribe to the #EmailGeeks Newsletter<\/span>\n<p><input id=\"fieldEmail\" name=\"cm-adrmi-adrmi\" type=\"email\" style=\"width:90%\" required placeholder=\"Your Email Address\" \/><\/p>\n<p><button type=\"submit\">Subscribe<\/button><\/p>\n<\/form>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve been experimenting with interactive email, you may find that carousels with image thumbnails may not trigger in Yahoo! Mail or AOL when viewed in Internet Explorer even though they <a href=\"http:\/\/freshinbox.com\/resources\/css.php\">support interactivity<\/a>. Thankfully there are workarounds that allow you put images within labels that will work in Internet Explorer&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3410,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,24],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3406"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=3406"}],"version-history":[{"count":14,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3406\/revisions"}],"predecessor-version":[{"id":3434,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3406\/revisions\/3434"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/3410"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=3406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=3406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=3406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}