If you’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 support interactivity. This is especially perplexing because the same email will work on Safari and Chrome.

Thankfully there are workarounds that allow you put images within labels that will work in Internet Explorer.

On the other hand if your interactivity is only enabled in non-Webmail clients (ie. only Webkit clients like iOS) you don’t have to worry about this issue.

Images in Labels

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.

This is a known Internet Explorer bug that has been around for a while.

Solutions

Drop the <form> tag

Interestingly, this problem does not occur if your interactive content is not wrapped in a <form> 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.

Naturally the first is that you cannot submit the form – and if you are implementing a shopping cart in an email, this would not work. The second downside is say you intend to use copies of an image carousel within an email, you need to rename the input fields since they may interfere with each other now that they are no longer isolated with form elements.

See the Pen Labels with images may not trigger in Internet explorer by FreshInbox (@freshinbox) on CodePen.

Use background image

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.

Using background images allow you to keep the <form> tag around your interactive content.