CSS transition not working in IE - html

Question

I cant get this transition working in IE or Firefox, It looks fine in Safari and Chrome.
The opacity shows but is instant.
To me the below CSS looks right and I can't see any reason that it would work in either IE or firefox.
I've tried this using -ms-transition and it yields the same results, but the site uses CSS3 anyway so shouldn't need the -ms- anyway from what I've read.
Any light that can be shed would be greatly appreciated!
Ben
CSS:
.XMABAN {
height: 153px;
width: 230px;
background-color:rgb(127,0,25);
padding: 0;
vertical-align: top;
}
.XMABAN a {
height: 153px;
width: 230px;
text-decoration:none;
}
.XMABAN a:hover {
text-decoration:none;
}
.XMABAN img {
opacity: 1;
transition: opacity 0.70s ease-in-out;
-moz-transition: opacity 0.70s ease-in-out;
-webkit-transition: opacity 0.70s ease-in-out;
-o-transition: opacity 0.70s ease-in-out;
}
.XMABAN a:hover img {
opacity: 0.30;
transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
}
.XMABAN span {
position: relative;
left: 0%;
top: -62%;
font-weight:bold;
font-size:20pt;
color:#404040;
transition: color 0.70s ease-in-out;
-moz-transition: color 0.70s ease-in-out;
-webkit-transition: color 0.70s ease-in-out;
-o-transition: color 0.70s ease-in-out;
}
.XMABAN a:hover span {
color:#FFF0F5;
transition: color 0.25s ease-in-out;
-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
-o-transition: color 0.25s ease-in-out;
}
HTML:
<tr>
<td style="width: 33%;">
<div class="XMABAN" style="margin: 10px 0px 5px 0px;">
<a class="DSPI" href="online.asp">
<img src="../images/PRM_220.jpg">
<span>TEXT</span>
</a>
</div>
</td>
</tr>

Answer 1

CSS Transitions are not supported in IE9 or lower. They are supported in IE10, however, and the CSS you've included does work correctly in IE10.
I can only assume you're using IE10 with IE9 standards to test this, which is why the transition isn't working. To change this, simply set IE's Document Mode to Standards:
It's also worth noting that you should always include vendor prefixing before the intended CSS property. Specifying transition before -webkit-transition, for instance, will tell WebKit-based browsers to use the prefixed version instead of the actual version, and there may be differences in how each are handled. Change your CSS to:
-moz-transition: ...;
-webkit-transition: ...;
-o-transition: ...;
transition: ...;