Problem with jQuery append in ie7

Question

Hi guys I am having a very strange problem in ie with the append function. Basicly i retrieve data from an ajax call in xml. Parse the xml into variables then using the each function append to a specific div. Works fine in firefox had to do a work around to get the file to parse in ie. Please note 'ALL WORKS' fine my variables etc. all have values etc.

However when I use the append function some of the text randomly appears outside its containing div see picture below:

As you can see some of the text overflows the container or almost seems to reflect ? Any way below is a snippet of the code where i make the append: I should also add I am opening this div in a dialog box created with jquery ui - which sets the containing div to display: block - so i am wondering if this is having any effect.

$(xml).find("entry").each(function()
{

var $item = $(this);
var title = $item.find("title").text();
var linkN = $item.find("link").attr("href");
var output = "<a href=\"" + linkN + "\" target=\"_self\">" + title + "<\/a>" + "<br />";
$("#notifyBox").append($(output));
$('#notifyBox').show();
});

Really hope you guys can help this is the strangest problem I have ever encountered.

Answer 1

Try this instead:

$(xml).find("entry").each(function()
{
  var $item = $(this);
  var title = $item.find("title").text();
  var linkN = $item.find("link").attr("href");
  var output = "<a href='" + linkN + "' target='_self'>" + title + "</a><br />";
  $("#notifyBox").append($(output)).show();
});

I believe your <\/a> is causing the issue, no need to escape the forward slash, browser is seeing it as an unclosed element.

Answer 2

Well it seems a single float on the containing box (float: left) - was causing the issue - pesky ie - anyway hope this helps someone if they have the same problem. Thanks to Nick Craver hope helped me re-factor my code a bit - cheers