I have been trying to figure out for the longest time how I can get the splash page on this website to work correctly in IE8 and below? Right now, it works on all the other browsers (Firefox, Chrome, Safari). Here is the website:

http://gds.parkland.edu/student/fall10/gds220/ashipley/p2/final_revised/index.html

jQuery code:

/* Sliding Affect Splash Page */
$(function() {
    $('.box').each(function() {
        var $this = $(this);
        $.data(this, 'css', { 
            width: $this.css('width'),
            background: $this.css('background-image') 
        });
    });
});

function restore() {
    $('.box').each(function() {
        var orig = $.data(this, 'css');
        $(this).animate({
            width: orig.width
        },{queue:false});
        $(this).css({backgroundImage: orig.background});
    });
}

/* box 1 */
function boxHover(){
        $('.box').stop().animate({'width' : '596px'},{queue:false});
}

function box1master(){
        $('.box2').css({backgroundImage: 'url(images/splash/zatgun_midtop.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/zatgun_midbottom.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/zatgun_bottom.jpg)'});
}
function box2master(){
        $('.box1').css({backgroundImage: 'url(images/splash/bryan_top.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/bryan_midbottom.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/bryan_bottom.jpg)'});
}
function box3master(){
        $('.box1').css({backgroundImage:'url(images/splash/galleries_top.jpg)'});
        $('.box2').css({backgroundImage: 'url(images/splash/galleries_midtop.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/galleries_bottom.jpg)'});
}
function box4master(){
        $('.box1').css({backgroundImage: 'url(images/splash/contact_top.jpg)'});
        $('.box2').css({backgroundImage: 'url(images/splash/contact_midtop.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/contact_midbottom.jpg)'});
}


$(document).ready(function(){

    $('.box1').hover(function(){
        boxHover();
        box1master();
    }, function(){      
        restore();
    });

    $('.box2').hover(function(){
        boxHover();
        box2master();       
    }, function(){      
        restore();
    });

    $('.box3').hover(function(){
        boxHover();
        box3master();
    }, function(){      
        restore();
    });

    $('.box4').hover(function(){
        boxHover();
        box4master();
    }, function(){      
        restore();
    });

});

I wonder if I could change the spacing in-between each of the boxes using jQuery or if I somehow have to do this in the CSS/HTML?