I have this site here. I'm using a simple tootip called VTIP for the category navigation

The little red X keeps showing upon hovering over the categories in IE8. What am I doing wrong? I've tried several things to try to fix this but nothing works. I've;

  • gotten rid of that line of code
  • made it absolute path


I'm assuming it's this line of code

Code JavaScript:
            $('p#vtip #vtipArrow').attr("src", '/images/vtip_arrow.png');

Here is the JS file

Code JavaScript:
this.vtip = function() {    
    this.xOffset = 10; // x distance from mouse. originally -10 due to the use of the vtip_arrow.png
    this.yOffset = 10; // y distance from mouse       
 
    $(".vtip").unbind().hover(    
        function(e) {
            this.t = this.title;
            this.title = ''; 
            this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
 
            $('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>' );
 
            $('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png');
            $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
 
        },
        function() {
            this.title = this.t;
            $("p#vtip").fadeOut("slow").remove();
        }
    ).mousemove(
        function(e) {
            this.top = (e.pageY + yOffset);
            this.left = (e.pageX + xOffset);
 
            $("p#vtip").css("top", this.top+"px").css("left", this.left+"px");
        }
    );            
 
};
 
jQuery(document).ready(function($){vtip();})