CODEWITHSUNDEEP
jquerycssinternet-explorer-8
zevstatiev
zevstatiev

Reputation: 113

jQuery IE8 css not working or atleast not working correctly

I've written a custom slider for this project http://dl.dropbox.com/u/18292748/Sites/enblaze/index.html and it seems to work correctly everywhere except IE8. What happens is when the page is initially loaded, the first slide looks fine, but then when you change go to the next slide everything breaks like that:

IE8Fail

The two functions that mainly alter the css are: 

function showAnimation(slide) {
    if(animating || visible) {
        return;
    } else {
        animating = true;
        //enter animation
        // slide.wrapper.css({'visibility': 'visible'});
        // $('wrap_slides').addClass('ieFails');
            slide.bg.animate({'opacity':1}, speed, function() {
                slide.sep.animate({'opacity':1}, speed+400);
                    slide.typo.animate({'opacity':1, top:0}, speed, function() {
                         slide.people.animate({'opacity':1}, speed, function() {
                             slide.preview.animate({'opacity':1},speed, function () {
                                 animating = false;
                                 visible = true;
                             });
                         });
                     });
            });
    }
}

function hideAnimation(slide, cb) {
    if(animating || visible==false) {
        return;
    } else {
        animating = true;
        //exit animation
        slide.preview.animate({'opacity':0},speedxit, function() {
            slide.people.animate({'opacity':0},speedxit,function() {
                slide.sep.animate({'opacity':0},speedxit, function() {
                    slide.typo.animate({'opacity':0, 'top': -220},speedxit, function() {
                        animating = false;
                        visible = false;
                        $('.wrap_slide').css({'z-index':8});
                        slide.wrapper.css({'z-index':9});
                        cb();
                    });
                });
            });
        });
    }
}

This is the complete js source for the slider http://dl.dropbox.com/u/18292748/Sites/enblaze/assets/javascripts/lib/slider.js Not that pretty but it worked so far. I've tried to make a conditional targeting for ie8 only, but even the addClass function (to target activated slide only, since the first slide looks fine) doesn't seem to work.

I feel helpless.

Upvotes: 2

Views: 1128

Answers (2)

gearsdigital
gearsdigital

Reputation: 14205

Try to set position:absolute only for IE8.

.ie8 .slide_preview.monitor{
    position:absolute;
    top:0
}

Or try to select a hack that works only for IE8. http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

Upvotes: 2

Drew
Drew

Reputation: 898

I would definitely guess it has something to do with your opacity, IE8 cannot render 'opacity' instead it uses filter: alpha(opacity = x);

Upvotes: 1

Related Questions