pseudo elements IE10 button - css

Question

I put together a button using :before and :after elements and IE10/9 are ignoring them completely, as far as I can tell they should be working perfectly in at least those 2 versions.
.buttonSML {
background-position:-35px -432px;
background-color: transparent;
border: none;
text-transform: uppercase;
font-size: 2.9rem;
font-weight: #font-bold;
height: 55px;
padding: 0 5px;
position: relative;
.text-shadow(0,0,4px);
cursor: pointer;
}
.buttonSML:before, .buttonSML:after {
content: " ";
position: absolute;
top: 0;
height: 55px;
width: 20px;
display: inline-block;
visibility: visible
}
.buttonSML:before {
background-image: url('../images/sprite.png');
background-position: 0px -432px;
background-repeat: no-repeat;
background-color: transparent;
left: -20px;
}
.buttonSML:after {
background: url('../images/sprite.png');
background-position: -394px -432px;
background-repeat: no-repeat;
background-color: transparent;
right: -20px;
}
Added a jsfiddle so you can see the end result http://jsfiddle.net/7D4kG/1/
Not really sure what up so would appreciate any advice you guys can provide.

Answer 1

After some work I found 2 solutions.
FIrst is with the help of jquery, you can replace with and add
$('#button-id').click(function ()
{
$('#form-id').submit();
});
Works well, but you loose HTML5 form validations.
To keep the validations you can skip the jquery and just add "overflow: visible" to your buttons style. Have only tested it in IE10 so far, will test the rest later when I republish.

Answer 2

http://jsfiddle.net/3MHHs/1/
I have made some changes and it works for me in Chrome and IE10. I completely removed the positioning, because that is very ...advanced thing in pseudos. Browsers fail on simpler cases too. I have removed the 5px padding too.
.sprite {
background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png')
}
.buttonSML {
background-position: -35px -432px;
background-color: transparent;
border: none;
text-transform: uppercase;
font-size: 2rem;
height: 55px;
padding: 0;
cursor: pointer;
}
.buttonSML:before, .buttonSML:after {
content: "";
width: 20px;
height: 55px;
font-size: 2rem;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-color: white; /* sorry */
background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png');
}
.buttonSML:before {
background-position: 0px -432px;
}
.buttonSML:after {
background-position: -394px -432px;
}