[CLOSED] How to remove the TabPanel header bottom border?

Hi,

I was trying to remove the blue header border tab that I am showing in the attachement, using Firebug, but I could not find the way to do it.

Could you tell me please how to do it?

Code:

---




ul.x-tab-strip-top


{


-moz-background-size:auto auto;


background-attachment:scroll;


background-color:#FFFFA9;


background-image:none;


background-position:center bottom;


border-bottom-style:none;


border-bottom-width:0;


padding-top:0px;


padding-bottom:0px;


border:none;


}


.x-tab-panel-noborder .x-tab-panel-header-noborder


{


border-bottom-width:0px;


border-top-width:0px;


}


<ext:TabPanel ID="TabPanel1" runat="server" Height="600px" Border="false"


ActiveTabIndex="0">


<Items>


<ext:Panel ID="Panel1" runat="server" Title="Group Test" Border="false">


<Content>





<ext:Panel ID="Panel4" runat="server" Height="300px" Border="false">


<Content>


</Content>


</ext:Panel>









<ext:GridPanel ID="GridPanelGroupListing" runat="server" Height="300" Title="Group Listing">


</ext:GridPanel>



 


</Content>


</ext:Panel>


</Items>


</ext:TabPanel>

---

Hi,

If you need that border with space then

Code:

---

.x-tab-panel-header{
            padding-bottom:0px;
        }

---

If that space is required

Code:

---

.x-tab-panel-header{
            background-color: #FFFFA9;
        }

---

Just use Firebug to investigate DOM structure and you will be able to manipulate the UI