locked
CSS Causing Tabs to Display Like a Menu Bar RRS feed

  • Question

  • User1769015664 posted

    I am using AJAX Tab Container and have the following CSS; the Tabs don't look like tabs anymore and it seems to be like a menu bar.

    Also, my tabs are going from left to right which takes up the entire screen width; how do I stack them up?

    /*Header*/
    .Tab .ajax__tab_header
    {
        color: #4682b4;
        font-family:Calibri;
        font-size: 14px;
        font-weight: bold;
        background-color: #ffffff;
        margin-left: 0px;
    }
    /*Body*/
    .Tab .ajax__tab_body
    {
        border:1px solid #b4cbdf;
        padding-top:0px;
    }
    /*Tab Active*/
    .Tab .ajax__tab_active .ajax__tab_tab
    {
        /*color: #ffffff;*/
        color: red;
        background:url("../../tab_active.gif") repeat-x;
        height:20px;
    }
    .Tab .ajax__tab_active .ajax__tab_inner
    {
        color: #ffffff;
        background:url("../../tab_left_active.gif") no-repeat left;
        padding-left:10px;
    }
    .Tab .ajax__tab_active .ajax__tab_outer
    {
        color: #ffffff;
        background:url("../../tab_right_active.gif") no-repeat right;
        padding-right:6px;
    }
    /*Tab Hover*/
    .Tab .ajax__tab_hover .ajax__tab_tab
    {
        color: #000000;
        background:url("../../tab_hover.gif") repeat-x;
        height:20px;
    }
    .Tab .ajax__tab_hover .ajax__tab_inner
    {
        color: #000000;
        background:url("../../tab_left_hover.gif") no-repeat left;
        padding-left:10px;
    }
    .Tab .ajax__tab_hover .ajax__tab_outer
    {
        color: #000000;
        background:url("../../tab_right_hover.gif") no-repeat right;
        padding-right:6px;
    }
    /*Tab Inactive*/
    .Tab .ajax__tab_tab
    {
        color: #666666;
        background:url("../../tab_Inactive.gif") repeat-x;
        height:20px;
    }
    .Tab .ajax__tab_inner
    {
        color: #666666;
        background:url("../../tab_left_inactive.gif") no-repeat left;
        padding-left:10px;
    }
    .Tab .ajax__tab_outer
    {
        color: #666666;
        background:url("../../tab_right_inactive.gif") no-repeat right;
        padding-right:6px;
        margin-right: 2px;
    }

    Friday, December 9, 2016 7:16 PM

Answers

  • User1769015664 posted

    Never mind, I have removed the CSS from the tab container.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 9, 2016 11:04 PM

All replies

  • User1769015664 posted

    Never mind, I have removed the CSS from the tab container.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 9, 2016 11:04 PM
  • User-1838255255 posted

    Hi NJ2,

     I am not clear if your issue have been solved, if not, please post complete code, include body and style, only in this way, we can better help you solve your problem!

    Best Regards,

    Eric Du

    Sunday, December 11, 2016 6:06 AM