Saturday, March 26, 2011

css transparency problems in IE

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; }
.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:

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. 

No comments:

Post a Comment