JQuery $ el.position (...) - undefined

I have a navigation bar that uses another element <li>in the list to create an underline effect that animates under the hover element and animates back to the active mouse element.

Fiddle: http://jsfiddle.net/jP59W/

It seems to work fine in Chrome and Firefox, but in IE (8) I get invalid argument error, but I don’t see what can cause it.

Despite the fact that it works in Firefox, it still throws this error:

$el.position(...) is undefinedwhich is this line:

leftPos = $el.position().left;

HTML

<div id="navbar">
    <ul class="clearfix">
        <li class="active">
            <a id="myoeHome" href="#">Welcome</a>
        </li>
        <li>
            <a id="myAccount" href="#">Your Profile</a>
        </li>
        <li>
            <a id="referAFriend" href="#">Refer A Friend </a>
        </li>
        <li>
        <a id="referralReport" href="#">View Rewards </a>
        </li>
        <li>
            <a id="shoutandShare" href="#">Write a Review </a>
        </li>
    </ul>
</div>

CSS

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

JQuery

// nav
var $el, leftPos, newWidth,
$mainNav = $("#navbar ul");

$mainNav.prepend("<li id='magic-line'></li>");
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 < 1) {
            $magicLine.hide();
            //console.log($('#navbar ul').children('.active').length < 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 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 < 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();
});