absolute-positioned objects added via jQuery are not positioning properly!

Question

I'm dynamically adding some lis to an unordered list using jQuery. They are positioned absolutely (using the style param on each li), but when they are added to the page they aren't in the right positions, even though when I check them with Firebug or Chrome's element inspector, all the values are correct.

Also note that the lis are using the jQuery draggable and resizeable classes.

you can see it here: http://bit.ly/5HfegZ

This is the script that adds the lis to the page (from xml file)

 //load saved board  
      var savedBoard = getParameterByName("open");
      if (savedBoard != ""){

       $.ajax({
                  type: "GET",
                  url: "saved/" + savedBoard + ".xml",
                  dataType: "xml",
                  success: function(xml) {

                      $(xml).find('item').each(function() {
                          var openTag = $(this).find('openTag').text();
                      openTag = openTag.replace(/%3C/g, "<");
                      openTag = openTag.replace(/%2F/g, "/");
                      openTag = openTag.replace(/%3E/g, ">");
                          var media = $(this).find('media').text();
                      media = media.replace(/%3C/g, "<");
                      media = media.replace(/%2F/g, "/");
                      media = media.replace(/%3E/g, ">");

                          $('#other').append(openTag + "<div class='inners'>" + media + "</div><div class='boxMenu'><img class='star' src='img/gold_star.gif' alt='Favorite' /><img class='delete' src='img/minus.gif' alt='Delete'/><p></p></div></li>");
                          $("li", "#other").draggable();
                          $("li", "#other").resizable({ transparent: true, handles: 'all' });
                          menustuff();
                          checkColour();
                      });

                  }
              });

      }

HTML:

<ul id="other" class="ui-widget-header">

XML:

<item n="0"> 
<openTag>%3Cli runat='server' title='0' class='ui-widget-content' style='z-index:16;width:250px;height:150px;top:187 px;left:135px;'%3E</openTag> 
<media>%3Cimg class="imaged" src="http:%2F%2Fimages.websnapr.com%2F?size=s&amp;key=bOJhv6ljQ0aq&amp;url=http:%2F%2Fwww.cancerpartnersuk.org" alt=""&gt;</media>

Answer 1

ok i found out that it wasent displaying correctly because the jQuery ui.resizable class was position: relative; i just set that to position: absolute; and all was well again.