jquery code not working in chrome

Question

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);                
        });
    });

Answer 1

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>

Answer 2

Change this line:

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

To this:

closeinterval = setInterval(scrollContent, 6000);

This fixed it for me.. see example here

Answer 3

Validate your HTML...