(followup to the previous thread)

The form looks okay and the underlying code works fine. So now I'm trying to "tighten up" the form, move things closer to the top to lessen the white space. I've been playing around with "style="position: absolute; top: n%; left: n%" positioning for the few controls on the page, when suddenly ...

The controls no longer respond.

By which I mean that you can't click on the Back button and fire the "btnBack_Click" event, you can't click in the "txtResearch" to enter a new value to search on, and you can't click on the Search button and fire the "btnResearch_Click" event.

How in the world can moving controls around on the form make them ignore any user action? Here is the page's HTML and ASP tags in text:

[form id="SearchResults" runat="server" style="height: 565px; width: 1000px;"]

    [div id="divContainer" style=" position:absolute; height:565px; width:1000px;"]   

        [div id="toprectangle" style="height: 10%; width: 60%; border: groove 1px black;"]

            [asp:Label ID="Label1" runat="server" Text="Member Name Search Results" Width="47%" Font-Size="12pt" Font-Bold="true" ][/asp:Label]

            [asp:Button ID="btnBack" runat="server" Style="border-style: none; z-index: 108; left: 2%; position: absolute; top: 25%; background-image: url('Images/BTN_Back.gif'); background-repeat: no-repeat; cursor: hand; background-color: transparent; bottom: 33px;" 

                CommandName="Submit" Height="25px" OnClick="btnBack_Click" Width="120px" TabIndex="1"/]

        [/div]

        [div id="divResearch" style="position: absolute; top: 12%; width: 60%; border: groove 1px black; height: 10%;"]

             [asp:Label runat="server" Font-Size="10pt" ForeColor="Blue" Font-Bold="true" style="position: absolute; left: 5%; top: 17%;" ]Search:[/asp:Label]

             [asp:TextBox runat="server" ID="txtResearch" Width="25%" style="position: absolute; left: 20%; top: 17%;"][/asp:TextBox]

             [asp:Button runat="server" ID="btnResearch" style="position: absolute; left: 50%; top: 17%; width: 10%;" Text="Search" OnClick="btnResearch_Click" /]

        [/div]

        [div id="divEmpGrid" style="position: absolute; top: 30%; width: 90%;"]

             [igtbl:UltraWebGrid ID="WebGrid" runat="server" Height="85%" Width="90%"

                    Style="z-index: 200; position: absolute; left: 2%; top: 35%; font-size: 10pt"]

                [Bands]

                    [igtbl:UltraGridBand]

                    [/igtbl:UltraGridBand]

                [/Bands]

                [DisplayLayout BorderCollapseDefault="Separate" Name="WebGrid" RowHeightDefault="20px" 

                    Version="4.00" ScrollBar="Auto"]                   

                    [FrameStyle Height="85%" Width="90%"][/FrameStyle]

                [/DisplayLayout]

            [/igtbl:UltraWebGrid]

        [/div]   [!-- divEmpGrid --]

    [/div]  [!-- divContainer --]

[/form]

Does anybody see anything that I did to cause this to occur?

It seems that having both the "div" tag to contain everything on the form and the form itself to be exactly the same size

[form id="SearchResults" runat="server" style="height: 565px; width: 1000px;"]



[div id="divContainer" style=" position:absolute; height:565px; width:1000px;"]

caused one to overlay the other. You could "look" through it, but you couldn't access anything on the form. Kinda like having a plate of glass on top. Once I removed the height and width properties from the Form statement, it worked as expected.