zevstatiev zevstatiev - 2 months ago 10
CSS Question

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.

Answer

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/