Ajaxtoolkit tab header showing half of its text

See more:

ASP.NET

ajaxtoolkit tab header showing half of its text and other half cut down

below code is working fine in a demo page..but in my apllication page,header text not visiable properly of the tab

What I have tried:

<asp:TabContainer ID="pxp" runat="server" ActiveTabIndex="0" Width="100%">
                    <asp:TabPanel ID="TabPageUserCreation" runat="server" HeaderText="User">
                        <ContentTemplate>  
                                
                           </ContentTemplate>  
                    </asp:TabPanel>
                    <asp:TabPanel ID="TabPageRoleCreation" HeaderText="Role" runat="server">
                        <ContentTemplate> 
                                
                           </ContentTemplate> 
                          </asp:TabPanel>
                    <asp:TabPanel ID="TabPageUserRole" HeaderText="User Role Assignment" runat="server">
                       <ContentTemplate>
                               

                                    

                                    
                                     
 
                            </ContentTemplate>
                    </asp:TabPanel>
                    <asp:TabPanel ID="TabPageRoleRightAssignment" HeaderText="Role Right Assignment" runat="server">
                        <ContentTemplate>
                                
                          </ContentTemplate>
                    </asp:TabPanel>
            </asp:TabContainer>
        </ContentTemplate>