css - IE8, transparent PNG and filter:alpha -
i'll cut right point. here's output:
(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
Post a Comment