Unusual Javascript Image Caption Bug

Question

Using some home-brewed (with Google's help) javscript on a site. It's displaying fine in Firefox, Safari, Chrome, but of course not in Internet Explorer. I have not tested in IE8 only IE7 but I need to get IE7 bug-free.

Essentially, I'm grabbing photos from Flickr and outputting them via the FlickrRSS plugin for WordPress. I will post relevant code below. My problem is this: hovering the images brings up the popup (larger) image for any image that DOES NOT have a caption / title. For those that have titles, the popup image doesn't display at all (but the bug only occurs in IE7). I'm really not sure if this is a JS or CSS bug, because I can't get into the DOM to see what's happening in IE7 because the element is only appended during :hover and then removed on mouseout. Any debug help... PLEASE?!

The live version of the site can be seen here: http://yasmeenadance.com (scroll down to the photo thumbnails under the video).

Here is my HTML being output for each element % tags indicate shortcode for the plugin:

    <div class="popup">
        <a href="%image_medium%" class="preview" title="%title%"><img src="%image_square%" alt="%title%"  /></a> 
<img class="preload" style="display: none !important;" src="%image_medium%">
    </div>

And here is the HTML for the popup (which is generated dynamically and appended to the body tag with fixed position)

<p id="preview"><img src="large_img_url" alt="Image preview ... Loading" />Img Title Goes here as caption</p>

Here is the relevant javascript / jquery code:

//The overlay or pop-up effect
this.imagePreview = function(){ 
    /* CONFIG */

        xOffset = 40;
        yOffset = 120;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.preview").click(function(e){
        return false;
        });
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/><span>" + this.t : "</span>";
        $("body").append('<p id="preview"><img src="'+ this.href +'" alt="Image preview ... Loading" />'+ c +'</p>');
        $("#preview")
            .hide()
            .css("top",(e.pageY - yOffset) + "px")
            .css("left",(e.pageX + xOffset) + "px")
            .fadeIn("2000");                        
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        var top = e.pageY - yOffset;
        var left = e.pageX + xOffset;
        //flips the image if it gets too close to the right side
        while ((left + 500) > window.innerWidth){
             left -= jQuery("#preview").outerWidth() + xOffset*2;
        }
        $("#preview")
            .css("top",top + "px")
            .css("left",left + "px");
    });         

Answer 1

In the following ternary:

var c = (this.t != "") ? "<br/><span>" + this.t : "</span>";

You're saying "If this has a title, insert a line break, then open a span and pop in the title. If it doesn't, then close a span tag".

Basically, the first case gives you an un-closed span, and the second closes a span which had never been opened.

As @Basiclife said correctly, accurate diagnosis and here is the proper syntax:

var c = (this.t != "") ? "<br/><span>" + this.t + "</span>":"";