jquery code not working in chrome

This code works is FF and IE but not in Chrome. Any help would be greatly appreciated. Thank You! Realized that this code works fine on its own but when its hosted on this page (http://www.automotive-fleet.com) it doesn't work in Chrome and Safari. I can't figure out why. Any help would be appreciated.

here is the html

<div id="popularsearches">
<div id="popularsearches-inside">
    <div id="popularsearches-left">
                <ul>
                <li>Item One </li>
                <li>Item Two </li>
                <li>Item Three </li>
                <li>Item Four </li>
                <li>Item Five</a> </li>
                </ul>
    </div>
    <div id="popularsearches-right">
                <ul>
                <li>Item Six </li>
                <li>Item Seven </li>
         开发者_如何学运维       <li>Item Eight </li>
                <li>Item Nine </li>
                <li>Item ten </li>
                </ul>
    </div>
</div>
</div>

here is the css

#popularsearches
{
    border-bottom: 1px solid #D4D4D4;
    border-left: 1px solid #D4D4D4;
    border-right: 1px solid #D4D4D4;
    overflow:hidden;    
    height: 130px;    width:248px;
   margin-bottom:20px;
}

#popularsearches ul
{
    padding:0 5px 0 0;
    margin:0;
}

#popularsearches ul li
{
    list-style-type:none;
    list-style-position:inside;
    border-bottom: solid 1px #D4D4D4;
    font-size:14px;
    padding:3px 0 3px 0;
    margin:0 0 0 10px;
    text-align:left;
}

#popularsearches ul li a
{
    text-decoration:none;
}

#popularsearches ul li a:hover, a:link, a:visited
{
    text-decoration:none;
}

#popularsearches-inside
{
    width: 500px;
}

#popularsearches-left
{       
    float:left;
    width:250px;
    height:100px;
}

#popularsearches-right
{       
    float:left;
    width:250px;
    height:100px;
}

here is the jQuery

    var closeinterval = 0;

    function scrollContent() {
        //Toggle left between 250 and 0
        var top = jQuery("#popularsearches").scrollLeft() == 0 ? 250 : 0;            
        jQuery("#popularsearches").animate({ scrollLeft: top }, "slow");
    }

    // Call scrollContent function every 6 secs
    closeinterval = setInterval("scrollContent()", 6000);

    jQuery(document).ready(function() {
        jQuery("#popular-button-left").bind("click", function() {
            if (closeinterval) {
                window.clearInterval(closeinterval);
                closeinterval = null;
            }

            jQuery("#popularsearches").animate({ scrollLeft: 0 }, 1000);
        });
        jQuery("#popular-button-right").bind("click", function() {
            if (closeinterval) {
                window.clearInterval(closeinterval)
                closeinterval = null;
            }

            jQuery("#popularsearches").animate({ scrollLeft: 250 }, 1000);                
        });
    });

Change this line:

closeinterval = setInterval("scrollContent()", 6000);

To this:

closeinterval = setInterval(scrollContent, 6000);

This fixed it for me.. see example here

Could it be the iffy markup in the following div?

<div id="popularsearches-left">
            <ul>
            <li>Item One </li>
            <li>Item Two </li>
            <li>Item Three </li>
            <li>Item Four </li>
            <li>Item Five</a> <-- renegade closing tag</li>
            </ul>
</div>