css transparency problems in IE

Imagine that, IE has formatting problems with css standards...

So... working with some transparency today, and for the life of me I couldn't figure out what was going on.  I had 2 menus, both falling under the same a:hover transparency.  Firefox: everything looks good, Opera: everything looks good, Safari: who cares, IE: transparency works in one menu, but not the other? Here is was my css 

a{text-decoration:none;color:#5C756C; }
a:hover{background-color:#EAE9D9;filter:alpha(opacity=80);opacity:0.8;}
.side_menu{float:left;display:block;width:250px;margin:0 20px -10px 0;}
.side_menu a{padding:10px; border-bottom:dotted 1px #888671; display:block; }

So the links that were inside the .side_menu class showed transparency while the ones that weren't did not?

So I started playing around with the elements one by one, and you know which one made it go non-transparent? width! If I took away the width:250px;, it was no longer transparent. So, All I had to do was add in a width:100%; to the a element and this problem was fixed. But then this leads to another problem: you don't want to necessarily have all of your links to be 100% width, so you have to make a choice: make different classes for widths, inline css, forget about transparency, forget about IE, or a million others.

Imagine if the most popular browser on the planet actually followed set standards... I may as well keep dreaming.

Sidenote: The CSS you need for transparency (non IE compliant, for IE, just add a width declaration) is simply this:

.class_name{filter:alpha(opacity=80);opacity:0.8}

If IE would follow standards, you would not need the 'filter' property, just 'opacity'. The 80 and .8 mean 80% opaque, the higher the number, the less transparent and vise versa. 

 

Source :- http://naspinski.net/category/css.aspx