[Plugin: WooCommerce] Navigation menu li elements have no width

am using WordPress 3.5.2 and WooCommerce 2.0.13 and have built the majority of a site I am working on, yet have to come to implementing a PayPal portal for a selection of products the clients need to have on offer.

With the main navigation menu that I have placed in the header I have included a sliding line below the menu items to denote which of them is the active item. I also have an AJAX reloader in place so I have a number of click functions (not all shown) to ensure that correct active element is always selected.

Please see the code below:

var $el, leftPos, newWidth,
    $mainNav = $("#menu-header-menu");

    $("#menu-header-menu a").click(function() {
    $(this).parent().siblings().removeClass("current_page_item");
    $(this).parent().addClass("current_page_item");
    $activeLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $activeLine.position().left)
    .data("origWidth", $activeLine.width());
    });

    $mainNav.append("<li id='active-line'></li>");
    var $activeLine = $("#active-line");

    $activeLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $activeLine.position().left)
    .data("origWidth", $activeLine.width());

     $("#menu-header-menu li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $activeLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
     }, function() {
    $activeLine.stop().animate({
        left: $activeLine.data("origLeft"),
        width: $activeLine.data("origWidth")
    });
    });

and CSS

#menu-header-menu {
        margin: 0 auto;
        list-style: none;
        position: relative;
        width: 960px;
    }

    #menu-header-menu li {
        display: inline;
    }

    #menu-header-menu li a {
        color:#C8C8C8;
        display: block;
        float: left;
        padding: 6px 15px 4px 15px;
        font-size: 14px;
        font-weight: 700;
        line-height: 22px;
        transition: color 0.6s ease-in 0s;
    }

    #active-line {
        position: absolute;
        bottom: 2px;
        left: 0;
        width: 100px;
        height: 1px;
        background: white; }

This all works perfectly until I activate the WooCommerce plugin. At this point the function to the retrieve the ‘width’ of the “.current_menu_item” returns a value of 0, while the ‘left’ value of “.current_menu_item a” continues to work normally. Looking at the site in Firebug I can see that #active_line is still being appended and the ‘left’ value continues to be updated and animated as per the code, the ‘width’ value, however, continues to stay at 0.

The issue seems to be the width value of li elements only, because if I change the selectors in the jQuery to retrieve the width of the “.current_page_item a” element (or “#menu-header-menu li a” for the hover function) the jQuery starts to return a positive ‘width’ value, albeit not the one I want!

I can also force the ‘#menu-header-menu li’ elements to have a width value by adding:

#menu-header-menu li {
        width: 100px !important;
    }

The strange thing is (or maybe it’s not strange, because I can’t work out why it is doing it!), is that the ‘width’ value continues to be stuck at 0 even when I disable the jQuery scripts and css file from WooCommerce.

I have a number of other plugins that are working fine with my code, and I have no idea what this is!!!

Thank you all so much in advance!!

http://ww.wp.xz.cn/plugins/woocommerce/