My issue: I've made myself an image map/interactive image of sorts and it's working perfectly on Chrome, safari and Firefox. However, when I try it on the dreaded internet explorer, it's really glitchy. The little points are supposed to expand into larger boxes, on internet explorer it either doesn't work or messes up in the process.
See the problem: See this Fiddle, See this website for a better idea (my code is active on here).
What part of my code could be causing this it to mess up on IE? Any help would be greatly appreciated!
HTML and CSS:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'> <link href='//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'> <style> html color: #e5e5e5; text-align: center; font-family: "Roboto", Helvetica, sans-serif; } body { max-width: 1200px; margin: 20px auto; padding: 0 100px; overflow-x: hidden; } .description { max-width: 600px; margin: 0 auto; color: rgba(229, 229, 229, 0.7); } div, img, footer { position: relative; box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; text-transform: uppercase; font-family: "Roboto Condensed", Helvetica, sans-serif; font-weight: 300; } h1 { font-size: 36pt; } h2 { font-size: 24pt; } h3 { font-size: 18pt; } h4 { font-size: 16pt; } h5 { font-size: 14pt; } h6 { font-size: 12pt; } p { font-size: 12pt; margin-bottom: 12pt; margin-right: 12px; margin-left: 12px; } strong { font-weight: 900; font-family: "Roboto Condensed", Helvetica, sans-serif; color: #e5e5e5; } a { -webkit-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; font-family: "Roboto Condensed", Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #dff3fd; } a:visited { color: #dff3fd; } li.active a, a:hover, a:active { color: #e5e5e5; } .centered { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .centered-y { position: inline-block; width: auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .distribution-map { position: relative; width: 1190px; padding: 20px; box-sizing: border-box; margin: 0 auto; } .distribution-map > img { width: 100%; position: relative; margin: 0; padding: 0; } .distribution-map .map-point { cursor: pointer; outline: none; z-index: 0; position: absolute; width: 40px; height: 40px; border-radius: 20px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out; -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s; -webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; background: rgba(26, 26, 26, 0.85); border: 3px solid #dff3fd; } .distribution-map .map-point .content { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; width: 100%; height: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); overflow: overlay; } .distribution-map .map-point:active, .distribution-map .map-point:focus { position: absolute; margin-left: auto; margin-right: auto; padding: 0; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; width: 550px; height: 400px; color: #e5e5e5; z-index: 1; -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out; transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out; } .distribution-map .map-point:active .content, .distribution-map .map-point:focus .content { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out; -webkit-transition-delay: 0.25s, 0s, 0s; -webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; overflow: hidden; } .distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active { color: #dff3fd; } </style> </head> <body> <h1></h1> <div class="distribution-map"> <button class="map-point" style="top:24%;left:26.5%"> <div class="content"> <div class="centered-y"> <h2>Another</h2> <p>details</p> <iframe width="350" height="197" src="https://www.youtube.com/embed/5MgBikgcWnY" frameborder="0" allowfullscreen></iframe> </div> </div> </button> <button class="map-point" style="top:26%;left:49%"> <div class="content"> <div class="centered-y"> <h2>Another</h2> <p>Details...</p> </div> </div> </button> <button class="map-point" style="top:27.3%;left:71.4%"> <div class="content"> <div class="centered-y"> <h2>Another</h2> <p>Details...</p> </div> </div> </button> <button class="map-point" style="top:63.5%;left:31.5%"> <div class="content"> <div class="centered-y"> <h2>Another one</h2> <p>Details...</p> </div> </div> </button> <button class="map-point" style="top:65%;left:56%"> <div class="content"> <div class="centered-y"> <h2>another one</h2> <p>Details...</p> </div> </div> </button> <button class="map-point" style="top:68%;left:74%"> <div class="content"> <div class="centered-y"> <h2>Another</h2> <p>Details...</p> </div> </div> </button> </div>