Internet Explorer Div a/link click not working

Glenn Glenn's Blog 0 Comments

Internet Explorer is the bane of any web developer especially as older versions continue to be used worldwide.

My Div link in IE isn’t Clickable

A rather annoying bug is found in clickable divs (using absolute full size link) on IE 10 and below that renders them useless unless they have a background colour. One proposed solution to this is to add a transparent div in the a / link element, but for us that’s just adding unnecessary load to the page. We much prefer to keep the background colour, but simply make it transparent. The following should work a treat:-


<div class="clickable-div"><a href="#yourlink"></a></div>

[css]
.clickable-div {
display: relative;
}
.clickable-div a {
background: white;
filter: alpha(opacity=0); opacity: 0; // fix IE background click issues
cursor: pointer;
width: 100%;
height: 100%;
display: inline-block;
}
[/css]
About the Author
Internet Explorer Div a/link click not working Internet Explorer Div a/link click not working 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *