Question

I want to translate the div called “register_bottom_bar” inside its parent div “register_tile” by 174 pixels upwards using JQuery. I got it to work perfectly in Chrome and Firefox.

How can I do the same in IE? I’m testing it on IE 8.

“register_tile” is a floating div inside a bigger div and “register_bottom_bar” lies at the bottom of “register_tile” with position:relative.

$('.register_tile').click(function () {
    $(this).css('opacity', '1');
    $(this).css('background-image', 'none');
    $('.register_bottom_bar').css('-webkit-transform', 'translate(0,-174px)');
    $('.register_bottom_bar').css('-moz-transform', 'translate(0,-174px)');
});

Answer 1

if you need support for old version of IE (6, 7, 8) you’ll need to play with the properties margin / position instead.

$('.register_tile').click(function () {
    $(this).css('opacity', '1');
    $(this).css('background-image', 'none');
    $('.register_bottom_bar').css('left', '-174px); // With absolute / relative positioning
    // OR
    $('.register_bottom_bar').css('margin-left', '-174px);
});