How do I change the tab container properties from the ajax tool kit using CSS stylesheets?

Currently, I am working on a C# / VB project that is using tab containers from the ajax toolkit. I would like the tab panels customized as below in the css style.

I have tested the css stylesheet in a clean web application and it works very well. However, when i tested it in my current project the padding between the tabs is gone.

I have changed the padding properties but nothing. Any ideas to why this would happen and how can I fix this?

This is the clean web application:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication6._Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .tabCont .ajax__tab_header
        {
            font-family: verdana,tahoma,helvetica;
            font-size: 11px;
        }
        .tabCont .ajax__tab_outer
        {
            padding-right: 4px;
            height: 21px;
        }
        .tabCont .ajax__tab_inner
        {
            padding-left: 3px;
        }
        .tabCont .ajax__tab_tab
        {
            height: 13px;
            padding: 4px;
            margin: 0px;
        }
        .tabCont .ajax__tab_hover .ajax__tab_outer
        {
            cursor: pointer;
        }
        .tabCont .ajax__tab_hover .ajax__tab_inner
        {
            cursor: pointer;
        }
        .tabCont .ajax__tab_hover .ajax__tab_tab
        {
            cursor: pointer;
        }
        .tabCont .ajax__tab_active .ajax__tab_outer
        {
        }
        .tabCont .ajax__tab_active .ajax__tab_inner
        {
        }
        .tabCont .ajax__tab_active .ajax__tab_tab
        {
        }
        .tabCont .ajax__tab_disabled
        {
            color: #A0A0A0;
        }
        Change the content template: .tabCont .ajax__tab_body
        {
            font-family: verdana,tahoma,helvetica;
            font-size: 10pt;
            border: 0px solid #999999;
            border-top: 0;
            padding: 8px;
            background-color: White;
            margin: 12px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div>
        <asp:TabContainer ID="tabcontainer1" runat="server" ActiveTabIndex="1" CssClass="tabCont"
            Height="226px" Width="414px">
            <asp:TabPanel runat="server" HeaderText="Add" ID="tplAdd">
                <ContentTemplate>
                    fdgdfgdfgdfg
                </ContentTemplate>
            </asp:TabPanel>
            <asp:TabPanel ID="tplEdit" runat="server" HeaderText="Edit">
                <ContentTemplate>
                    dghfghfhgfhgfh
                </ContentTemplate>
            </asp:TabPanel>
        </asp:TabContainer>
    </div>
    </form>
</body>
</html>

This is the sample project code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ProfileManager.ascx.cs"
    Inherits="widgets_ProfileManager" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" BackColor="Black"
    BorderStyle="None" CssClass="tabCont">
    <cc1:TabPanel runat="server" HeaderText="Monday" ID="TabPanel1">
        <ContentTemplate>
            <h2>
                Monday</h2>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Search" /><br />

        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Tuesday">

        <ContentTemplate>
            <h2>
                Tuesday</h2>
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Wednesday">
        <ContentTemplate>
            <h2>
                Wednesday
            </h2>

        </ContentTemplate>
    </cc1:TabPanel>

    <cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="Thursday">
        <ContentTemplate>
           hello
        </ContentTemplate>
    </cc1:TabPanel>
</cc1:TabContainer>

ansaurus

tags:

views:

answers:

How do I change the tab container properties from the ajax tool kit using CSS stylesheets?

related questions