title: jQuery $el.position(...) is undefined
body: <p>I have a nav bar which uses another <code>&lt;li&gt;</code> element in the list to create an underline effect that animates underneath the hovered element and animates back to the active element on mouse out.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/jP59W/" rel="noreferrer">http://jsfiddle.net/jP59W/</a></p>
  
  <p>It seems to work great in Chrome and Firefox but in IE (8) I get an <code>invalid argument error</code> but I can't see what could be causing it.</p>
  
  <p>Even though it works in Firefox, it still throws this error aswell:</p>
  
  <p><code>$el.position(...) is undefined</code> which is this line: </p>
  
  <pre><code>leftPos = $el.position().left;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="navbar"&gt;
      &lt;ul class="clearfix"&gt;
          &lt;li class="active"&gt;
              &lt;a id="myoeHome" href="#"&gt;Welcome&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a id="myAccount" href="#"&gt;Your Profile&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a id="referAFriend" href="#"&gt;Refer A Friend &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
          &lt;a id="referralReport" href="#"&gt;View Rewards &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a id="shoutandShare" href="#"&gt;Write a Review &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#navbar {
      position: relative;
      background-color: #ffffff;
      width: 990px;
      margin: -21px 0 0 0;
  
      padding: 20px 0 0 0;
      height: 35px;
  
      zoom: 1;
  }
  
  #navbar ul {
      width: 945px;
      list-style: none;
      padding: 0 0 0 40px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      top:-13px;
  
      *margin: -25px auto 0 auto;
  }
  
  #navbar ul li {
      display: inline-block;
      text-align: left;
  
      /* padding: 0 1px 0 1px; */
  
      /* margin: 0 60px 0 5px; */
  
      margin: 0 0 0 0;
      padding: 10px 0 24px 0;
      width: 185px;
  
      *display: inline;
      *zoom: 1;
       *margin: 25px -11px 0 0;
  }
  
  #navbar ul li a {
      font-family: Helvetica, Arial;
      font-size: 18px;
      color: #002e55;
      text-align: center;
      padding-bottom: 24px;
  
      *display: inline;
      *float: left;
  
   }
  
  #magic-line {
      position: absolute;
      bottom: 8px;
      left: 0;
      height: 3px;
      background: url("http://www.4playtheband.co.uk/assets/nav-magic-line.png") no-repeat center bottom;
      margin: 0 !important;
      padding: 0 !important;
  
      *bottom: 7px;
      *z-index: 999;
      *height: auto;
   }
  
  #navbar ul li a:hover {
       height: 4px;
       /*border-bottom: 3px solid #002e55;*/
  
       zoom: 1;
  
      *margin-top: -39px;
  
  }
  
  #navbar ul li a.active {
      background: url("../images/psd/active-nav-bg.png") no-repeat 49% 2px;
      height: 4px;
      border-bottom: 3px solid #002e55;
  
      zoom: 1;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>// nav
  var $el, leftPos, newWidth,
  $mainNav = $("#navbar ul");
  
  $mainNav.prepend("&lt;li id='magic-line'&gt;&lt;/li&gt;");
  var $magicLine = $("#magic-line");
  
  function navBar() {
      // console.log('navBar start');
      function checkActive() {
          // console.log('check active');
          // Hide magic line if nav bar has no active element
          if($('#navbar ul').children('.active').length &lt; 1) {
              $magicLine.hide();
              //console.log($('#navbar ul').children('.active').length &lt; 1);
              //console.log($('#magic-line'));
              //console.log('hide');
          }
          else {
              $magicLine.stop().animate({
                  left: $magicLine.css('left', $(".active a").css('left')),
                  width: $magicLine.width($(".active a").width())
              });
          }
      }
      checkActive();
      $magicLine
          .width($(".active a").width())
          .css("left", $(".active a").position().left)
          .data("origLeft", $magicLine.position().left)
          .data("origWidth", $(".active a").width());
  
      // $("#navbar ul li a").hover(function() {
      // apply hover function to li instead and just just el to it's child
      $("#navbar ul li").hover(function() {
          // $el = $(this);
          $el = $(this).children('a');
          leftPos = $el.position().left;
          newWidth = $el.width();
          $magicLine.stop().animate({
              left: leftPos,
              width: newWidth
          }, 600);
      }, function() {
          if($('#navbar ul').children('.active').length &lt; 1) {
              $magicLine.stop();
              checkActive();
          } else {
              $magicLine.stop().animate({
                  left: $magicLine.data("origLeft"),
                  //width: $magicLine.data("origWidth")
                  width: $magicLine.width($(".active a").width())
              }, 600);
          }
      });
  }
  
  $(document).ready(function() {
      $magicLine.width($(".active a").width());
      navBar();
  });
  </code></pre>