css - IE8, transparent PNG and filter:alpha -


i'll cut right point. here's output:

enter image description here

(now optional code - read if want ;))

here's markup:

<a href="/" id="logo_wrapper">     <span class="logo logo_normal"></span>     <span class="logo logo_hover"></span> </a> 

here's css (shortened relevant stuff, reading pleasure):

#logo_wrapper {   position:relative; } #logo_wrapper .logo {   display:block;   width:260px;   height:80px;   background-image:url(logo.png);   position:absolute; } #logo_wrapper .logo_normal {   background-position:0 0; } #logo_wrapper .logo_normal:hover {   opacity:0;   filter:alpha(opacity=0); } #logo_wrapper .logo_hover {   background-position:0 -80px;   opacity:0;   filter:alpha(opacity=0); } #logo_wrapper .logo_hover:hover {   opacity:1;   filter:alpha(opacity=100); /* offender! */ } 

just clarify: i'm aware can away single span , switching logo's background-position on hover, full css features cute css3 transitions real browsers aren't supposed scroll logo , down.

ok, so, it's png 32 bit colour depth and, of course, transparency. fine in ie8 when use no alpha filter @ or filter:alpha(opacity=0). opacity set 100, mere use of filter causes ie8 go crazy , make not entirely transparent pixels 100% opaque. not particular image looks bad effect, it's still annoying :d.

now, i'm aware ie8 notorious transparent png problems, troubles dating ie6 , hideous solid cyan fill of transparent areas. 1 fixed ie behaviour black magic.

what can done ie8?

you need use alphaimageloader filter, ie6.


Comments

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

windows - Python Service Installation - "Could not find PythonClass entry" -

Determine if a XmlNode is empty or null in C#? -