позиция div в Internet Explorer

Question

У меня проблемы с новым слайдером, который я делаю.

у меня есть 3 div 1 относительное и 2 абсолютное

csss: #caixa_grande{ position:relative; width:150px; height:80px; overflow:hidden;}
#texto{ position:absolute;}
.caixa_pequena{ position:absolute;}

jquery, который собирается добавить левую сторону к элементам слайдера

$(document).ready(function(){
    esq = 0;
$(".caixa_pequena").each(function(){
    var $element = $(this).css('left'); 
    final = parseFloat($element) + parseFloat(esq);        
    $(this).css('left', parseFloat(final) + 'px');
    esq = esq  + 200;   
});
});

function nav_depois(){
    $("#texto").animate({left: '-=200'}, 1500);
}

function nav_antes(){
   $("#texto").animate({left: '+=200'}, 1500);
}

и дивы

<div id="caixa_grande">
<div id="texto">    
    <div class="caixa_pequena">SPORT LISBOA E BENFICA</div>
    <div class="caixa_pequena">SPORTING CLUBE DE PORTUGAL</div>
    <div class="caixa_pequena">FUTEBOL CLUBE DOS COXOS</div>
</div>  
</div>
<div>
    <span><a id="nav_antes" onclick='nav_antes()'>nav_antes</a></span>
    <span><a id="nav_depois" onclick='nav_depois()'>nav_depois</a></span>
</div>  

проблема в том, что в Firefox ползунок работает нормально, а информация о div разделяется на 200px, но в обозревателе интернета ползунок работает, когда информация находится в той же позиции, что и абсолютная ширина, не осталось.

вот ссылка;

пример страницы

Answer 1

Удалить position: absolute из .caixa_pequena класса, потому что #texto уже абсолютно позиционирован.