Extremely weird IE7/8 border/opacity compatibility issue

Question

The weird problem is borders disappearing when Opacity is applied in IE/8/9, but NOT in 7!
I've basically got a menu with tabs on top of the screen. I.e:

<table>  
 <tr>  
  <td class="tab">button 1...<*/td>  
  <td class="tab">button 2....<*/td>  
  .  
  .  
  .  
 </tr>  
 </table>  

 <style>  
 td  
 {  
    opacity: 0.45;  
    filter:alpha(opacity=45);  
    .  
    .  
    .  
 }  
 td.tab:hover  
 {  
    opacity: 1;  
    filter:alpha(opacity=100);  
 }  

Sorry about the stars, I couldn't get the code block formatting working right.
Basically this is just supposed to unfade the buttons when the mouse is hovered over them, but the borders just disappear! This problem only occurs on IE8/9, but everything works fine on IE7,FF,Chrome,Safari.
I've trawled the internet looking for some weird IE8+ border/opacity issues, but there don't seem to be any.
Has anyone encountered something similar?

Answer 1

The filter style is for IE7 and lower only.

IE8 requires you to use -ms-filter (ie with a vendor prefix) instead. Plus the syntax is more complex in IE8. It looks like this:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

IE9 drops support for filter entirely, and replaces it with standard CSS3 opacity, which works the same as it does in all other browsrs.

Quirksmode.org has the full details: http://www.quirksmode.org/css/opacity.html