AJAX :: Tabcontainer Doesn't Show Tabs In Properlly? - asp.net

Question

i am using TabContainer Control of AjaxToolkit for asp.net but when i using it in my project it doesn't shows properly. i googled much but can't find proper solution see below image please help me.
CODE:
<asp:TabContainer ID="TabContainer1" runat="server">
<asp:TabPanel ID="tbpnluser" runat="server">
<HeaderTemplate>
Item Detail</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="itemDetailGrdPanel" runat="server">
<asp:GridView ID="grdItemDetail" runat="server" AutoGenerateColumns="False" OnRowCreated="gridView_RowCreated"
GridLines="None" OnRowDataBound="gridView_RowDataBound" CellPadding="4" ForeColor="#333333"
AllowPaging="True" PageSize="5" AutoGenerateSelectButton="True" >
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField HeaderText="Item Code" DataField="ItemCode">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
</asp:BoundField>
<asp:BoundField HeaderText="Item Description" DataField="ItemDescription">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
</asp:BoundField>
<asp:BoundField HeaderText="Detail" DataField="ItemDetail">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
</asp:BoundField>
<asp:BoundField HeaderText="Quantity" DataField="Quantity">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
</asp:BoundField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
</asp:GridView>
</asp:Panel>
<asp:Panel ID="itemDetailEditPanel" runat="server">
<table align="left" style="width: 187px">
<tr>
<td>
</td>
<td align="left">
Item Code:
</td>
<td>
<asp:TextBox ID="txtItemCode" runat="server" ReadOnly="True"></asp:TextBox>
</td>
<td>
<asp:Button ID="btnFindItemCode" runat="server" Text="Find" />
</td>
</tr>
<tr style="height:70px; vertical-align:top; ">
<td>
</td>
<td >
Item Description:
</td>
<td>
<asp:TextBox ID="txtItemDescription" runat="server" Height="54px"></asp:TextBox>
</td>
</tr>
<tr style=" vertical-align:top; ">
<td>
</td>
<td >
Item Detail:
</td>
<td>
<asp:TextBox ID="txtItemDetail" runat="server" Height="23px"></asp:TextBox>
</td>
</tr>
<tr style=" vertical-align:top; ">
<td>
</td>
<td >
Quantity:
</td>
<td>
<asp:TextBox ID="txtQuantity" runat="server" Height="23px"></asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tbpnlusrdetails" runat="server">
<HeaderTemplate>
User Details</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<table align="center">
<tr>
<td align="right" colspan="2">
</td>
<td>
<b>User Details</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
UserName:
</td>
<td>
<b>Suresh Dasari</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
FirstName:
</td>
<td>
<b>Suresh</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
LastName:
</td>
<td>
<b>Dasari</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
Email:
</td>
<td>
<b>sureshbabudasari#gmail.com</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
Phone No:
</td>
<td>
<b>1234567890</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
Location:
</td>
<td align="left">
<b>Hyderabad</b>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tbpnljobdetails" runat="server">
<HeaderTemplate>
Job Details</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server">
<table align="center">
<tr>
<td>
</td>
<td align="right">
</td>
<td>
<b>Job Details</b>
</td>
</tr>
<tr>
<td>
</td>
<td align="right">
Job Type:
</td>
<td>
<b>Software</b>
</td>
</tr>
<tr>
<td>
</td>
<td align="right">
Industry:
</td>
<td>
<b>IT</b>
</td>
</tr>
<tr>
<td>
</td>
<td align="right">
Designation:
</td>
<td>
<b>Software Engineer</b>
</td>
</tr>
<tr>
<td>
</td>
<td align="right">
Company:
</td>
<td>
<b>aspdotnet-suresh</b>
</td>
</tr>
<tr>
<td>
</td>
<td align="right">
Phone No:
</td>
<td>
<b>1234567890</b>
</td>
</tr>
<tr>
<td>
</td>
<td align="right">
Location:
</td>
<td align="left">
<b>Hyderabad</b>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>

Answer 1

Try to use (also) the HeaderText property:
<asp:TabPanel ID="tbpnluser" runat="server" HeaderText="Item Detail">
<HeaderTemplate>
Item Detail</HeaderTemplate>
<ContentTemplate>

Answer 2

For the panel itemDetailEditPanel use this markup:
<asp:Panel ID="itemDetailEditPanel" runat="server" style="display: table-cell;align: left;">
<table style="width: 187px;">

Answer 3

I found that if my browser was in Compatibility mode, I would get this, but in Standards mode, it worked fine. After a bunch of hacking, I found this workaround for Compatibility mode:
Try adding this to your style tag:
/* Deals with TabPanel height issue in Compatibility mode */
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
{
height: 22px !important;
}
the !important helps because something else was shrinking the height, causing the whitespace to appear below. !important ensures that your code takes priority.