problem jquery nested sortable list in IE7/8

i am having the same problem as in this thread

jQuery unexpected sortable behaviour

my system is doing identically the same thing. the only difference between my code and his code is that my code is 100% generated by ajax on the fly, and im inserting tables into each of the LI, but alas the results are the same. here is the html im inserting for each of my master list entries.

here is the blank list thats in my html

<ul id=\"questionList\">

  </ul>

this is generated by javascript and ajax calls on the fly

<li id="liName-11" class="ui-state-default">
  <table width="600" border=".5" cellspacing="2" cellpadding="2" class="singleBorder">   
    <tr>
      <td width="386" align="left" valign="top">
        <span id="quesEditText-11">Does Default Work
        </span>
        <table>
          <tr>
            <td>
              <span id="quesEditSpan-11" onclick="setEditField('ques', 11)">Edit
              </edit>
            </td>
            <td>
              <span id="quesUpdateSpan-11" onclick="updateQuestionCall('ques', 11)">Update
              </edit>
            </td>
            <td>
              <span id="deleteSpan-11" onclick="deleteQuestionAjax(11)">Delete
              </edit>
            </td>
          </tr>
        </table>
      </td>     
      <td width="200">
        <input type="text" id="answerBox11">
        <br>
        <a href="#" onclick="insertAnswer(11, 'answerBox11')">Insert Answer
        </a>
        <ul id="answerList-11">
          <li id="17">
            <span id="answEditText-17">lets try this answer
            </span>
            <table>
              <tr>
                <td>
                  <span id="answEditSpan-17" onclick="setEditField('answ', 17)">Edit
                  </edit>
                </td>
                <td>
                  <span id="answUpdateSpan-17" onclick="updateQuestionCall('answ', 17)" style="display:none;">Update
                  </edit>
                </td>
                <td>
                  <span id="deleteSpan-17" onclick="deleteAnswerAjax(17)">Delete
                  </edit>
                </td>
              </tr>
            </table>
          </li>
          <li id="13">
            <span id="answEditText-13">yet another question
            </span>
            <table>
              <tr>
                <td>
                  <span id="answEditSpan-13" onclick="setEditField('answ', 13)">Edit
                  </edit>
                </td>
                <td>
                  <span id="answUpdateSpan-13" onclick="updateQuestionCall('answ', 13)" style="display:none;">Update
                  </edit>
                </td>
                <td>
          开发者_StackOverflow社区        <span id="deleteSpan-13" onclick="deleteAnswerAjax(13)">Delete
                  </edit>
                </td>
              </tr>
            </table>
          </li>
        </ul>
      </td>   
    </tr> 
  </table>
</li>

folling the suggestion in the above thread, ive modified his suggestion into this

$("ul.list").live("mousedown", function(e){
        e.stopPropagation();
    });

but it has zero effect. works perfectly in chrome and firefox, but screws up in IE. trust me im about to just put in a script where if they see the site in IE that it will forward them to firefox and tell them to download a real browser but my boss doesn't like that idea. you guys have any idea?

1. Make sure your html is valid: you are closing your <span> elements with </edit>
2. Your script applies to a ul element with a list class which you don't define anywhere in your html.

http://api.jquery.com/event.stopPropagation/

You'll notice on this page that live() handles an event after it's already propagated up to the top of the document, so you'll need to use bind() instead of live().