While tidying up my CSS and JavaScript, I may have gone a bit overboard. The code seems to work fine on Chrome, Safari, and Firefox, but it's causing chaos in IE10. Check out the code here
<div id="bgmbutton1">
<img id="button1" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img id="obutton1" src="http://translationgames.org/images/button1.png" alt="Translation games">
<div id="otrigger1" class="button" data-case="translation"></div>
</div>
#bgmbutton1 {
position: fixed;
left: 2%;
top: 5%;
}
#button1 {
width: 25%;
}
#obutton1 {
width: 25%;
position: absolute;
top:0;
left:0;
}
#otrigger1 {
height:100%;
width:100%;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
z-index:5000;
}
I'm stumped. Perhaps I've overlooked something very basic. Any ideas?