jQuery IE8 css not working or atleast not working correctly

Question

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.

Can I suggest that you do not design for IE8 and lower? It's outdated "technology". I'm using this code: . This way we "force" users to update their browsers :) — Steven
– Steven, Commented Mar 1, 2012 at 13:55
@Steven - I don't think it's up to a designer to do that. Isn't IE8 still the second most used browser? — Niklas
– Niklas, Commented Mar 1, 2012 at 13:58
Thanks for the suggestion @Steven, but the market share of IE8 is still above 10%, so we can't afford that. — zevstatiev
– zevstatiev, Commented Mar 1, 2012 at 14:02
@gearsdigital It is not a CSS problem, since everything works fine before you trigger a slide change, e.g. the first slide (before moving arround) looks fine, but when you go to the next one and come back to the first – it fails big time. — zevstatiev
– zevstatiev, Commented Mar 1, 2012 at 14:07

gearsdigital · Accepted Answer · 2012-03-01 14:59:05Z

2

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/

edited Mar 1, 2012 at 14:59

answered Mar 1, 2012 at 14:09

gearsdigital

14.2k6 gold badges46 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zevstatiev Over a year ago

You were actually right that the problem is in the CSS. Thanks a bunch!

Drew · Accepted Answer · 2012-03-01 13:59:23Z

1

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

answered Mar 1, 2012 at 13:59

Drew

8987 silver badges12 bronze badges

1 Comment

zevstatiev Over a year ago

Thanks, but the opacity is generated with jQuery (not the css opacity:; property), so it should be the correct one.

Collectives™ on Stack Overflow

jQuery IE8 css not working or atleast not working correctly

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related