CODEWITHSUNDEEP
jquerycsshtmlinternet-explorer-10incompatibility
alexnode
alexnode

Reputation: 117

Transparent overlay div trigger on a button doesn't work in IE 10

I was trying to clean up my css and javascript and i went too far. while this code works on chrome safari and firefox it went nuts in IE10. http://jsfiddle.net/alexnode/y4y4A/1/

<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;
}

Any ideas? I am sure I am doing something wrong which is very basic.

Upvotes: 0

Views: 1152

Answers (1)

alexnode
alexnode

Reputation: 117

http://jsfiddle.net/alexnode/y4y4A/8/

#bgmbutton1{position: fixed;
    left: 2%;
    top: 5%;
    }
#button1 {width: 25%;}
#obutton1 {width: 25%;position: absolute;top:0;left:0;}
#otrigger1 {background:rgba(0,0,0,0); height:100%; width:100%; position: absolute; left: 0; top: 0; cursor: pointer; z-index:5000;}

You should add background:rgba(0,0,0,0); to create an invisible transparent overlay trigger. check the fiddle above.

Upvotes: 3

Related Questions