I am building a site that has navigation links on top and when clicked, the main content div slides out and the selected content slides in and is displayed. It works fine in Safari and Chrome (Webkit), but not in Firefox or IE. Why won't it work in those browers?

CSS:

#data, #data section {width:720px; height:600px;}
#data section {position:absolute; left:100%; margin-left:8px;}
#data {positon:relative; overflow:hidden;}
#data section:nth-child(1){left:0%}
#data section:nth-child(2){}
#data section:nth-child(3){}
#data section:nth-child(4){}

Navigation Header:

<div id="header">
    <div id="headertop" class="headers">
            <img src="images/Autumns-header_01.png">
    </div>
    <div id="headermenu1" class="headers" data-section="one">
            <a data-section="one" href="#"><img src="images/Autumns-header_02_on.png" id="headerm1"></a>
    </div>
    <div id="headermenu2" class="headers" data-section="two">
            <a data-section="two" href="#"><img src="images/Autumns-header_03.png" id="headerm2"></a>
    </div>
    <div id="headermenu3" class="headers" data-section="three">
            <a data-section="three" href="#"><img src="images/Autumns-header_04.png" id="headerm3"></a>
    </div>
    <div id="headermenu4" class="headers" data-section="four">
            <a data-section="four" href="#"><img src="images/Autumns-header_05.png" id="headerm4"></a>
    </div>
</div>

Main content area:

<div id="data">
    <section id="one" class="active">
    ....
    </section>
    <section id="two">
    ....
    </section>
    <section id="three">
    ....
    </section>
    <section id="four">
    ....
    </section>
</div>

jQuery:

$('.headers').click(function () {
    var clicked = $(this).attr('id');
    var sectionId = $(this).attr("data-section");
    if (sectionId == 'one' || sectionId == 'two' || sectionId == 'three' || sectionId == 'four') {
        $('#headerm1').attr('src', 'images/Autumns-header_02.png');
        $('#headerm2').attr('src', 'images/Autumns-header_03.png');
        $('#headerm3').attr('src', 'images/Autumns-header_04.png');
        $('#headerm4').attr('src', 'images/Autumns-header_05.png');
    }
    switch (sectionId) {
        case 'one':
            $('#headerm1').attr('src', 'images/Autumns-header_02_on.png');
            break;
        case 'two':
            $('#headerm2').attr('src', 'images/Autumns-header_03_on.png');
            break;
        case 'three':
            $('#headerm3').attr('src', 'images/Autumns-header_04_on.png');
            break;
        case 'four':
            $('#headerm4').attr('src', 'images/Autumns-header_05_on.png');
            break;
        default:
            //alert(clicked);
            break;
    }
    event.preventDefault();
    $toSlide = $("#data section#" + sectionId),
    $fromSlide = $('.active');
    if (!($toSlide.hasClass("active"))) {
        $fromSlide.animate({
            "left": "-100%"
        }, 500, 'linear')
        $toSlide.animate({
            "left": "0%"
        }, 500, 'linear', function () {
            $fromSlide.css("left", "100%");
            $fromSlide.removeClass("active");
            $toSlide.addClass("active");
        });
    }
});