JQuery modal will not go on top of list boxes in IE6

I have an aspx page that contains a JQuery UI modal (modal=true) and a asp.net listbox within a table. Whenever the modal is called, it is always displayed behind the listbox instead of on top. I've tried setting the z-Index property on both objects but this does not seem to make much difference. Note that i have tried using both absolute and relative positioning.

This only happens in IE6. IE 7 is fine but unfortunately I need to use the IE6 browser.

Here's a row snippet from the table containing the ListBox:

                        <tr style="position: relative; z-index: 80;">
                            <td colspan="3" style="position: relative; z-index: 80;">
                                <asp:ListBox ID="lstSites" runat="server" Height="100px" Width="100%" SelectionMode="Multiple"
                                    ></asp:ListBox>
                            </td>
                        </tr>

Here's the JQuery:

    <script type="text/javascript">

        $(function () {
            $("#dialog:ui-dialog").dialog("destroy");

            $("#helpModal").dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true                  
            });

            $("#<%= imgHelpIcon.ClientID %>")

        .click(function () {
            $("#helpModal").dialog("open");
        });
        });



    </script>

<%--Help modal s--%>
<div id="helpModal" class="" title="Help!!" style="z-index: 100;">
    <div style="z-index: 300;">
        <h4>
            Help info.....
        </h4>
    </div>
</div>

Can anyone suggest anything?

thanks

Upvotes: 3