jQuery-Marquee only working in Firefox

I’m using jQuery-Marquee to simulate a marquee effect for a ‘latest tweet’ div. But it only works in Firefox. It outputs correctly in Chrome but the marquee doesn’t scroll for some reason. Can someone help me figure out what’s going on?

HTML (this is what outputs)

<div class="latest-tweets">
  <ul class="sf-js-enabled">
    <li>
      <p class="tweet-text">
        <div style="width: 100000px; margin-left: 0px;" class="js-marquee-wrapper">
          <div class="js-marquee" style="margin-right: 0px; float: left;">RT <a class="twitter-screen-name" href="https://twitter.com/Kollaboration" target="_blank">@Kollaboration</a>: Angry Asian American, a new show from <a class="twitter-screen-name" href="https://twitter.com/angryasianman" target="_blank">@angryasianman</a> <a class="twitter-screen-name" href="https://twitter.com/jennyyangtv" target="_blank">@jennyyangtv</a> on <a class="twitter-screen-name" href="https://twitter.com/ISATVofficial" target="_blank">@ISATVofficial</a> Watch the first angry ep. here: http…<a href="http://twitter.com/ISATVofficial/status/447119023319162881" target="_blank">- 1 day ago</a>
          </div>
        </div>
      </p>
    </li>
  </ul>
</div>

JavaScript (in the footer of the actual site)

<script src="jquery.marquee.min.js"></script>
<script>
  jQuery(function () {
    jQuery('.tweet-text').marquee({
      pauseOnHover: true,
      duration: 8000
    });
  });
</script>

CSS

.latest-tweets {
  color: #ddd;
  float: left;
  line-height: 42px;
}
.latest-tweets ul {
  height: 42px;
  max-width: 550px !important;
  overflow: hidden;
  text-align: left;
}
.latest-tweets li {
  cursor: pointer;
  height: 42px;
}
.latest-tweets p {
  display: inline;
  margin-bottom: 0;
  white-space: nowrap;
}
.tweet-text {
  width: 550px;
  overflow: hidden;
}
.tweet-details {
  margin-left: 10px;
}
.tweet-details a {
  text-transform: none !important;
}