Strange gap in sliding div in IE (ok in FF)

On a site I’m designing, I have a portfolio page that uses jquery to slide up a div of info over an image on hover, as you can see here.

In FF, this effect is perfect. In IE however, a small black line is shown at the bottom in initial state, and a gap is shown at the bottom in hover state. The page also displays the “error on page” js-error at the bottom of the browser window.

This is the html to load the jquery and to show the portfolio items:


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
// client cases
$(document).ready(function(){                
        var hover_in_easing="easeOutExpo";
        var hover_out_easing="easeOutBounce";
        $(".info_container").show();
        $("div.portfolio_div").hover(function(){            
            $(this).find(".info_container").animate({top:"0px"},{duration: 400, easing: hover_in_easing});
        },function(){
            $(this).find(".info_container").animate({top:"140px"},{duration: 500, easing: hover_out_easing});
        });
    });
</script>


<!-- load portfolio -->
<div id="clients">

<div id="portfolio_container">
<?php 
query_posts('posts_per_page=50&post_type=clients');
if ( have_posts() ) while ( have_posts() ) : the_post(); 
?>
<div class="portfolio_div_container">
    <div class="portfolio_div">
        <?php the_post_thumbnail( array(200,140) ); ?>
        <div class="info_container">
        <div class="info">
            <strong><?php the_title(); ?></strong><br />
            <p><?php echo cc_get_the_term_list($post->ID, 'services', ' ', ', ', '', 0); ?></p>
            <p><a href="<?php echo get_permalink(); ?>">case bekijken</a></p>
        </div>
        <div class="info_bg"></div>
        </div>
        </div>
    </div>
<?php endwhile; wp_reset_query(); ?>
</div>
  
</div>

This is the css:


div#clients{
width: 890px;
overflow: hidden;
margin: 0 auto;
}
            
    #portfolio_container{    
    width: 890px;
    overflow: hidden;
    margin: 0 auto;
    }

    #portfolio_container .portfolio_div_container .portfolio_div img{
    width:200px;
    height:140px;
    }
    
    #portfolio_container .portfolio_div_container{    
    height:140px; 
    width:200px;    
    margin-right: 6px;
    margin-left: 6px;
    margin-bottom: 19px;
    border: 5px solid #7299b0;
    float:left;
    overflow:hidden;    
    position:relative;
    }
    
    #portfolio_container .portfolio_div_container .portfolio_div{
    height:140px;
    width:200px;            
    overflow:hidden;    
    position:relative;
    }

    #portfolio_container .portfolio_div .info_container{    
    width:200px;
    height:140px;        
    top:140px;        
    z-index:0;
    position:relative;    
    }
    
    #portfolio_container .portfolio_div div.info{
    position:relative;    
    width:160px;
    margin-left: 20px;
    margin-right: 20px;
    top:-140px;
    z-index:100;
    height:140px;
    color:#ffffff;
    font-size: 12px;
    }

    #portfolio_container .portfolio_div div.info p{
    font-size: 11px;
    padding-bottom:10px;
    text-align: left;
    }

    #portfolio_container .portfolio_div div.info a{
    color: #7299b0;
    text-decoration:none;
    border-bottom: 1px dashed #7299b0;
    outline:none;
    font-size: 11px;
    }

    #portfolio_container .portfolio_div div.info a:hover{
    color: #7299b0;
    text-decoration:none;
    border-bottom: 0;
    outline:none;
    }
    
    #portfolio_container .portfolio_div div.info_bg{    
    position:relative;    
    background-color:#000000;
    width:200px;    
    z-index:50;
    top:-288px;
    height:140px;        
    opacity:0.75;
    }


Does anyone know why there is this gap in IE and how to remove it?

Thanks in advance,
Stef