ISSUE: Part of dropdown checklist being hidden by other dropdown checklist

Feb 24, 2014 at 9:03 PM
I'm hoping someone here can help me with this.

I have a form that uses a few of these dropdown checklist controls that are arranged in a table. The problem is that if there is a dropdown checklist in the cell on the row directly above another one, when the user goes to make a selection from the one above part of the list is hidden by the dropdown checklist control on the row below it.
<table>
         <tr>
              <td align="right">
                    <asp:Label ID="Checklist1_Label" runat="server" 
                              Text="Checklist #1:" Font-Bold="True" 
                              Font-Names="Arial" Font-Size="Small" AssociatedControlID="Checklist1">
                    </asp:Label>
              </td>
              <td>
                    <cc1:DropDownCheckBoxes ID="Checklist1" runat="server" Font-Names="Arial" 
                                            UseButtons="False" UseSelectAllNode="False" 
                                            AutoPostBack="True">
                        <Style SelectBoxWidth="200px"></Style>
                        <Texts SelectBoxCaption = "" />
                        <Items>
                            <asp:ListItem>Item 1</asp:ListItem>
                            <asp:ListItem>Item 2</asp:ListItem>
                            <asp:ListItem>Item 3</asp:ListItem>
                        </Items>
                    </cc1:DropDownCheckBoxes>
              </td>
         </tr>
         <tr>
                <td align="right">
                    <asp:Label ID="Checklist2_Label" runat="server" 
                               Text="CheckList 2:" Font-Bold="True" 
                               Font-Names="Arial" Font-Size="Small" AssociatedControlID="Checklist2">
                    </asp:Label>
                </td>
                <td>
                    <cc1:DropDownCheckBoxes ID="Checklist2" runat="server" Font-Names="Arial" 
                                            UseButtons="False" UseSelectAllNode="False" 
                                            AutoPostBack="True">
                        <Style SelectBoxWidth="200px"></Style>
                        <Texts SelectBoxCaption = "" />
                    </cc1:DropDownCheckBoxes>
                </td>
      </tr>
</table>
Now, I can make it work properly if I put the following in my "Web.config"...
<system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=8" />
      </customHeaders>
    </httpProtocol>
</system.WebServer>
Then it works perfect, but then some items in my pages won't work with IE10, only IE8 and IE9. If I don't force IE8, all my other code works with all browsers except the issue with the dropdown checkboxlist.

To compound the problem, when I use the debugger in VS2010 the page displays and works perfect without forcing it into IE8 mode until I publish it to my test server and then I see the overlapping control issue so it's taking more time to debug.

Anyone have any ideas on how to fix this. I really like this control, it's made my life easier but it's getting to the point where I'm going to have to dump it if I can't figure out how to resolve this problem.