I have the following front end code:
<asp:Panel ID="pn_TSAdmin" runat="server" GroupingText="Timesheet Admin" CssClass="Dashboard_Panel" Visible="false">
<div id="dv_ProjectSelect" runat="server" style="width:500px;" >
<asp:Label ID="lb_Project" runat="server" Text="Project:" CssClass="Label" />
<asp:DropDownList ID="ddl_Project" runat="server" CssClass="Label" />
<asp:ImageButton ID="ibt_AddProject" runat="server" ImageAlign="AbsBottom" ImageUrl="~/Images/add.png" CssClass="ibt_22" OnClick="Click_AddProject" />
<asp:ImageButton ID="ibt_ProjectStatus" runat="server" ImageAlign="AbsBottom" ImageUrl="~/Images/power.png" CssClass="ibt_22" OnClick="Click_SwitchProject" />
</div>
<div id="dv_ProjectAdd" runat="server" style="width:500px;" visible="false">
<asp:Label ID="lb_NewProject" runat="server" CssClass="Label" Text="Project Name: " />
<asp:TextBox ID="txt_NewProject" runat="server" CssClass="Label" />
<asp:ImageButton ID="ibt_SubmitNewProject" runat="server" ImageUrl="~/Images/go.png" CssClass="ibt_22" OnClick="Click_SubmitProject" />
<asp:ImageButton ID="ibt_CancelNewProject" runat="server" ImageUrl="~/Images/cancel.png" CssClass="ibt_22" OnClick="Click_CancelAddProject" />
</div>
</asp:Panel>
Code behind for ibt_AddProject:
protected void Click_AddProject (object sender, EventArgs e)
{
dv_ProjectSelect.Visible = false;
dv_ProjectAdd.Visible = true;
}
Which is using the following CSS Classes:
.Label
{
width:200px;
margin:10px auto 10px 20px;
}
.ibt_22
{
width:22px;
height:22px;
margin: 10px auto 10px 10px;
}
dv_ProjectSelect shows up as expected with the items lining up perfectly.
However when I click ibt_AddProject the items aren't showing correctly in dv_ProjectAdd as per the following picpaste showing the screen transition(http://picpaste.com/DumbCSS-173MxC30.jpg)
I've seen things mentioned about adding cursor:text and also z-index:999 but nonbe of which have helped with this issue.
Any idea why this is happening and how I could go about resolving it so it looks correct.