:active being ignored by IE [duplicate] - html

Question

This question already has answers here:
:active css selector not working for IE8 and IE9
(2 answers)
Closed 8 years ago.
I'm making custom buttons with images and then using a div to align the numbers where I want them.
This method is working in every browser but IE. The text centers on the buttons but it is floating to the top. When I click on the button it completely ignores the :active for the button so all that is happening is the .numKeypad:active is working but the button does not.
What to change to make it work in IE? This is the part of my code I think is relevant:
HTML
<div id="btn1" class="btnKeypad" onclick="input(1);">
<div id="num1" class="numKeypad">1</div>
</div>
CSS
#btn1 {
background-image: url(../images/btnUp.png);
cursor:pointer;
left:129px;
top:63px;
}
#btn1:active {
background-image: url(../images/btnDown.png);
left:129px;
top:63px;
}
.numKeypad {
bottom:2px;
font-size:20pt;
position:relative;
text-align:center;
font-family: 'Old Standard TT', serif;
}
.numKeypad:active {
bottom:0px;
font-size:18pt;
position:relative;
text-align:center;
font-family: 'Old Standard TT', serif;
}

Answer 1

These threads might help you out:
How to make :active state work in IE?
:active css selector not working for IE8 and IE9
<a> with an inner <span> not triggering :active state in IE 8
http://msdn.microsoft.com/en-us/library/ie/cc848864%28v=vs.85%29.aspx
A tip regarding the CSS. This should do the exact same job without having unnecessary extra lines of code.
#btn1 {
background-image: url(../images/btnUp.png);
cursor:pointer;
left:129px;
top:63px;
}
#btn1:active {
background-image: url(../images/btnDown.png);
}
.numKeypad {
bottom:2px;
font-size:20pt;
position:relative;
text-align:center;
font-family: 'Old Standard TT', serif;
}
.numKeypad:active {
bottom:0px;
font-size:18pt;
}

Answer 2

Found the best solution, had to change things up a bit.
new HTML
<div id="btn1" class="btnKeypad" onclick="input(1);">1</div>
new CSS
#btn1 {
background-image: url(../images/btnUp.png);
cursor:pointer;
left:129px;
top:63px;
}
#btn1:active {
background-image: url(../images/btnDown.png);
}
.btnKeypad {
font-family:'Old Standard TT', serif;
vertical-align:middle;
text-align:center;
position:absolute;
line-height:36px;
font-size:20pt;
z-index:100;
height:36px;
width:42px;
}
.btnKeypad:active {
line-height:37px;
font-size:18pt;
}
I still have an issue with the text aligning at the top of the button only in IE but the functionality now works on everything exactly the way I designed it to. I moved everything into one div and condensed it. Now to see about using a different CSS for internet explorer to get the text to align. Thanks to user3687283 for helping clean the code up a little.