Jody Sowald Jody Sowald - 7 months ago 21
HTML Question

ASP: Table buttons become unclickable: Buttons nested inside a table, inside a div

So, I have a very simple ASP.Net page. It looks like this:

<head runat="server">
<style>
*{ padding:0; margin:0; }
table{ height:100%; width:100%; }
input { background-color:black; width:100%; height:100%; }
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td><asp:Button ID="Button00" runat="server" OnClick="Button_Click" /></td>
<td><asp:Button ID="Button10" runat="server" OnClick="Button_Click" /></td>
<td><asp:Button ID="Button20" runat="server" OnClick="Button_Click" /></td>
<td><asp:Button ID="Button30" runat="server" OnClick="Button_Click" /></td>
<td><asp:Button ID="Button40" runat="server" OnClick="Button_Click" /></td>
<td><asp:Button ID="Button50" runat="server" OnClick="Button_Click" /></td>
<td><asp:Button ID="Button60" runat="server" OnClick="Button_Click" /></td>
<td><asp:Button ID="Button70" runat="server" OnClick="Button_Click" /></td>
<td><asp:Button ID="Button80" runat="server" OnClick="Button_Click" /></td>
</tr>
<tr>
<td><asp:Button ID="Button01" runat="server" OnClick="Button_Click" /></td>
<td><asp:Button ID="Button11" runat="server" OnClick="Button_Click" /></td>
...


This continues with 8 more table rows all looking just like the first one.
Button_Click
performs an operation that I have already tested and it all works well. But I want the button grid to fill the height of the viewport, so when I added:

div{ position:fixed;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;}


it fixed my formatting, but it made all of my buttons unclickable (they do, however, still display). I have looked around a bit, but can't find anything similar; I am looking for pure HTML or ASP.Net answers, as this page is being used for instructional purposes. I believe i have narrowed the issue down to the div position tag as shown in the two images the only difference is the presence of

position:fixed;


enter image description here

enter image description here

Answer

Since you define the style to apply to all divs in the page, any other div after the table container will cover it and prevent the click. You can make sure that the style applies only to the table container by setting the id of the div:

<div id='div1'>
    <table>
        <tr>
        ...
        </tr>
    ...
    </table>
</div>

and by setting the style to apply to that specific div:

#div1
{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}