jquery Resizeable malfunctioning in Firefox

Question

Hello Everyone, in my web page i have a table and i want its first column to be resizeable. it works fine in IE8 but on Mozilla it shows resize icon in bottom right corner of the document. this is the code

$(".resizable").resizable({
            maxHeight: 25,
            maxWidth: 350,
            minHeight: 25,
            minWidth: 150
        });

here is how it shows up in IE8

here is how it shows up in Firefox

plz see the resize icon on bottom right corner

<table cellspacing="0">
    <thead>
        <tr>
            <th class="resizable ui-resizable">Task Number<div class="ui-resizable-handle ui-resizable-e" unselectable="on" style="-moz-user-select: none;"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on" style="-moz-user-select: none;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; -moz-user-select: none;" unselectable="on"></div></th>
            <th>Start Date</th>
            <th>Duration</th>
            <th style="width: 100px;">DeadLine</th>
            <th>Parent TaskID</th>

        </tr>
    </thead>
    <tbody>


             <tr class="1" id="row-0" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    TaskN

                </td>
                <td style="text-align: center;">
                <input type="text" value="01/12/2010" style="text-align: center;" name="StartDate[0]" id="StartDate_0_" class="DatePicker 11 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="7" name="Duration[0]" id="Duration_0_" class="DurationChange 11">

                </td>
                <td></td>
                <td></td>
             </tr>





             <tr class="2" id="row-1" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    TaskP

                </td>
                <td style="text-align: center;">
                <input type="text" value="01/11/2010" style="text-align: center;" name="StartDate[1]" id="StartDate_1_" class="DatePicker 12 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="7" name="Duration[1]" id="Duration_1_" class="DurationChange 12">

                </td>
                <td></td>
                <td></td>
             </tr>





             <tr class="3" id="row-2" style="color: blue;">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task12

                </td>
                <td style="text-align: center;">
                16/12/2010

                </td>
                <td>
                5

                </td>
                <td>18/11/2010</td>
                <td></td>
             </tr>





             <tr class="3.1" id="row-3" style="color: orange;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task2

                </td>
                <td style="text-align: center;">
                10/12/2010

                </td>
                <td>
                5

                </td>
                <td>19/09/2010</td>
                <td>1</td>
             </tr>





             <tr class="3.1.1" id="row-4" style="color: red;">
                <td width="150">
                    <div style="width: 42px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task3

                </td>
                <td style="text-align: center;">
                22/12/2010

                </td>
                <td>
                1

                </td>
                <td></td>
                <td>2</td>
             </tr>





             <tr class="3.1.1.1" id="row-5" style="color: red;">
                <td width="150">
                    <div style="width: 56px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task9

                </td>
                <td style="text-align: center;">
                <input type="text" value="30/10/2010" style="text-align: center;" name="StartDate[5]" id="StartDate_5_" class="DatePicker 9 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="34" name="Duration[5]" id="Duration_5_" class="DurationChange 9">

                </td>
                <td></td>
                <td>3</td>
             </tr>





             <tr class="3.1.2" id="row-6" style="color: orange;">
                <td width="150">
                    <div style="width: 42px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task10

                </td>
                <td style="text-align: center;">
                <input type="text" value="30/10/2010" style="text-align: center;" name="StartDate[6]" id="StartDate_6_" class="DatePicker 10 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="12" name="Duration[6]" id="Duration_6_" class="DurationChange 10">

                </td>
                <td>04/10/2010</td>
                <td>2</td>
             </tr>





             <tr class="3.2" id="row-7" style="color: red;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                          &nbsp;

                    </div>
                    task5

                </td>
                <td style="text-align: center;">
                <input type="text" value="25/10/2010" style="text-align: center;" name="StartDate[7]" id="StartDate_7_" class="DatePicker 5 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="3" name="Duration[7]" id="Duration_7_" class="DurationChange 5">

                </td>
                <td></td>
                <td>1</td>
             </tr>





             <tr class="3.3" id="row-8" style="color: orange;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                          &nbsp;

                    </div>
                    001

                </td>
                <td style="text-align: center;">
                <input type="text" value="19/10/2010" style="text-align: center;" name="StartDate[8]" id="StartDate_8_" class="DatePicker 7 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="5" name="Duration[8]" id="Duration_8_" class="DurationChange 7">

                </td>
                <td>23/10/2010</td>
                <td>1</td>
             </tr>





             <tr class="4" id="row-9" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task4

                </td>
                <td style="text-align: center;">
                15/01/2011

                </td>
                <td>
                5

                </td>
                <td></td>
                <td></td>
             </tr>




    </tbody>
    </table>

Answer 1

My guess is that your table markup is invalid, but in a way that IE is willing to let you get away with. Firefox is more strict about table markup. If you'll show us the full markup, we'll be able to help you better. (And of course, I may well be wrong.)

Update You haven't mentioned your DOCTYPE, but the markup is invalid in HTML5 according to the W3C Validator Service. There are several issues, but the most relevant is that th cannot contain a div. Most browsers will relocate those things outside the table when they run into them. The validator says it's valid HTML4 barring some niggles with attributes, though, so...

Edit Made this a community wiki because it doesn't have an answer (yet) and I have to move on to doing other things. Good luck with it.