0

I m using the below css code for asp tab container in visual studio 2012

<style type="text/css">
    .MyTabStyle .ajax__tab_header {
        font-family: "Helvetica Neue", Arial, Sans-Serif;
        font-size: 14px;
        font-weight: bold;
        display: block;
    }

        .MyTabStyle .ajax__tab_header .ajax__tab_outer {
            border-color: #222;
            color: #222;
            padding-left: 10px;
            margin-right: 3px;
            border: solid 1px #d7d7d7;
        }

        .MyTabStyle .ajax__tab_header .ajax__tab_inner {
            border-color: #666;
            color: #666;
            padding: 3px 10px 2px 0px;
        }

    .MyTabStyle .ajax__tab_hover .ajax__tab_outer {
        background-color: #9c3;
    }

    .MyTabStyle .ajax__tab_hover .ajax__tab_inner {
        color: #fff;
    }

    .MyTabStyle .ajax__tab_active .ajax__tab_outer {
        border-bottom-color: #ffffff;
        background-color: #d7d7d7;
    }

    .MyTabStyle .ajax__tab_active .ajax__tab_inner {
        color: #000;
        border-color: #333;
    }

    .MyTabStyle .ajax__tab_body {
        font-family: verdana,tahoma,helvetica;
        font-size: 10pt;
        background-color: #fff;
        border-top-width: 0;
        border: solid 1px #d7d7d7;
        border-top-color: #ffffff;
    }
</style>

and in body

   <body>
    <form id="form1" runat="server">
        <ajax:ToolkitScriptManager ID="scriptmanager1" runat="server">
        </ajax:ToolkitScriptManager>

        <ajax:TabContainer ID="TabContainer1" runat="server" CssClass="fancy fancy-green" Width="500px">
            <ajax:TabPanel ID="tbpnluser" runat="server">
                <HeaderTemplate>
                    New User
                </HeaderTemplate>
                <ContentTemplate>
                    content
                </ContentTemplate>
            </ajax:TabPanel>
            <ajax:TabPanel ID="TabPanel1" runat="server">
                <HeaderTemplate>
                    New User
                </HeaderTemplate>
                <ContentTemplate>
                    content
                </ContentTemplate>
            </ajax:TabPanel>

        </ajax:TabContainer>

    </form>
</body>

But the content portion is displayed next to the tabs and not below the tabs. I want to be displayed below the tabs. What mistake I did in CSS. Please clarify.

sample output here

Arun
  • 1

0 Answers0