zurb / orbit

454 stars 96 forks source link

IE8 Png Issue #64

Open stoise opened 12 years ago

stoise commented 12 years ago

So I altered the orbit file a tiny bit only to discover that my solutions aren't appearing to work. My js knowledge is very limited so I apologize if this is a very trivial question or fix.

I changed my orbit slider to work as fading divs with transparency permitted. you can view my example here. http://www.stoise.com/soe-software

It works in all other browers except for ie8. I read that with jquery it will automagically generate the appropiate opacity filter for ie8. The issue is that on the load, it completly neglects any command I throw at it to set the slides opacity to 0 after I set them to "display:block" even in the stylesheet, but if you continue to sit on the page, you'll notice the slider will continue to function, using the exact same opacity command that I'm trying to chuck at it.

I've spent the better-half of the day trying to grind out this bug, but I'm drawing blanks. These all do nothing.

slides.css({ "display" : "block" }) slides.css({"opacity" : 0}) $("#featured .content").css({ "opacity" : 0 }) (direct location of the divs that are acting up)

featured .content{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);}

.orbit-wrapper .content{ display: none; opacity: 0; filter: alpha(opacity=0); }

if I set the opacity to !important in the stylesheet, it will hide all of the slides, but that doesn't really fix anything because the slides are always hidden.

I feel like the solution is simple, I'm just not smart enough to diagnose it ):