When making a carousel it’s a common practice to not only include navigational arrows outside of the carousel but to also allow the user to click on the left and right side of the photo to navigate forward or backwards. This is typically accomplished by placing two absolutely positioned elements on top of the photo and listen for clicks on those elements to control navigation.
This is going to work as intended until you try it in IE. This is because transparent links aren’t clickable in Internet Explorer < 10 requiring us to resort to yet another IE workaround.
Note - this will work properly in all versions of IE if you’re changing the browser mode in the IE10 developer tools. I strongly suggest not testing for older versions of IE using the ‘Browser Mode’ setting in the IE 10 dev tools as there are more than a few things which will fail in the real browsers that don’t in the simulator.
Visit here for a demo in < IE 10 and again in any other browser to see it working.
There are a few techniques that we can use to make IE recognize the clicks on our anchor tags. The first is to add a transparent 1px background to the anchors. This is going to add another http request, albeit a small one, possibly delaying the loading of the page.
background-image: url("1px.gif") 0 0 repeat;
Second is to add one of the following fake url to a background image on the trigger elements. While these will get it working in IE it will cause chrome to throw a console warning that it ‘Failed to load resource’ or ‘Resource interpreted as Image but transferred with MIME type text/html: “about:blank”.’ neither of which are ideal.
background-image: url("iehack:///"); -or- background-image: url("about:blank");
And finally, by setting the background color on the anchor tags and then setting the opacity to 0 we are able to get the desired functionality without any of the side effects previously mentioned.
background-color: #ffffff; filter:alpha(opacity=0); opacity: 0;
Update: Thanks to an idea from Geo Fili in the comment section you can also embed a 1x1px transparent image into the css.
This technique works in all of the modern browsers and I was able to test it successfully back to IE7. If you have the ability to test in IE6 feel free to comment below and let us know if it works there too. And as always If you are having any issues feel free to comment below or mention me on twitter @fromanegg. Thanks for reading!