title: CSS transition not working in IE
body: <p>I cant get this transition working in IE or Firefox, It looks fine in Safari and Chrome.
  The opacity shows but is instant.<br>
  To me the below CSS looks right and I can't see any reason that it would work in either IE or firefox.<br> 
  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.
  <br>
  Any light that can be shed would be greatly appreciated!<br>
  Ben<br><br></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.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;  
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;tr&gt;
      &lt;td style="width: 33%;"&gt;
          &lt;div class="XMABAN" style="margin: 10px 0px 5px 0px;"&gt;
              &lt;a class="DSPI" href="online.asp"&gt;
                  &lt;img src="../images/PRM_220.jpg"&gt;
                  &lt;span&gt;TEXT&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>