title: Lava Lamp navigation jQuery Firefox
body: <p>I'm experiancing a weird problem with my lava lamp navigation. It's adapted after Jeffrey Way's Lava lamp <a href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-lava-lamp-style-navigation-menu/" rel="nofollow">tutorial</a>.
   The code for the lava lamp is at the bottom. Problems appear mainly in firefox (I'm using FF6) but occationally also in Chrome and Safari (but not IE9): The orange line above the menu item sometimes is too long and too much to the right when a page is loaded. When I hover over the item then it centers over it and stays there like it should from the beginning. 
  Any ideas why that happens? Something weird with position().left and outerWidth()?
  Feedback very appreciated!</p>
  
  <pre><code>(function($) {
  $.fn.spasticNav = function(options) {
      options = $.extend({
          speed: 500,
          reset: 1500,
          color: '#F29400',
          easing: 'easeOutExpo'
      }, options);
  
      return this.each(function() {
  
          var nav = $(this),
                  currentPageItem = $('#active', nav),
                  stroke,
                  reset;
  
          $('&lt;li id="stroke"&gt;&lt;/li&gt;').css({
              width: currentPageItem.outerWidth(),
              height: 4,
              margin: 0,
              left: currentPageItem.position().left,
              top: currentPageItem.position().top,
              backgroundColor: options.color
          }).appendTo(this);
          stroke = $('#stroke', nav);
  
          $('a:not(#stroke)', nav).hover(function() {
                      // mouse over
                      clearTimeout(reset);
                      stroke.animate(
                              {
                                  left : $(this).position().left,
                                  width : $(this).width()
  
                              },
                              {
                                  duration : options.speed,
                                  easing : options.easing,
                                  queue : false
                              }
                      );
  
                  }, function() {
                      // mouse out
                      reset = setTimeout(function() {
                          stroke.animate({
                              width : currentPageItem.outerWidth(),
                              left : currentPageItem.position().left
                          }, options.speed)
                      }, options.reset);
  
                  });
      });
  };
  })(jQuery); 
  </code></pre>