jQuery liScroll text width problem

I'm using this jQuery script to animate a scrolling bar of twitter updates http://the-taylors.org/blog/2010/03/15/liscroll-jquery-news-ticker-customisation-with-next-previous-play/

Its all working fine except the width of the Div (class=liScroll-ticker) that holds the UL is incorrectly calculated - its too small and the list elements are not remaining on the same line as a result.

I think I've narrowed it down to this line in the script:

$stripItems.each(function(i) {  
    stripWidth += jQuery(this, i).width();  
});  
$strip.width(stripWidth);

I read in another thread on here that injecting a [span] element might allow me to measure the width of that ra开发者_高级运维ther than the text. Does anyone have any idea how to insert that into the script above, or if that is even the correct approach?

Thanks for any help!

UPDATE

It seems that the way I am styling the text is increasing the width and the script does not add on the extra pixels.

I tried using the outerWidth() method on both stripWidth and accumulatedWidth with no success.

I also tried wrapping the contents of each <li> in a <span> and measuring that instead, and while it did return a different value it was still incorrect. Likewise with a <div>.

I'm fairly confused!! Am I even correct in thinking that the margins, padding, font-size and font-weight attributes are causing the problem? Or is it that I have <span> elements inside the <li>'s that aren't being measured?

Here is a demonstration of the problem: http://jsfiddle.net/martynr/ExcBr/9/

I have created a project on github and have tweaked the code a little to hopefully fix your issue. If there are still problems then it's easy to update it there and you can pull the latest version.

https://github.com/davetayls/jquery.liScroll

Hope this is useful