Styling Tabs

[dlukefinch]

I want the border to be completely transparent apart from the bottom (which should be a white bar) showing which is selected. Currently I have a faded border showing which is really annoying.

You can see the section here: metcast.net in the Weather Headline Section.

Here is the CSS I am currently using

.WXHeadline.x-tab-content {
    border: transparent;
    box-shadow: none;
    color: white;
    background: transparent;
    margin-bottom: none !important;
} 

.WXHeadline.x-nav-tabs >  .active > a, .WXHeadline.x-nav-tabs > .active > a:hover {
    box-shadow: transparent;
    text-decoration-color: white;  
    color: white;
    background: transparent;
    border-bottom: 2px solid white;
} 

.WXHeadline.x-nav-tabs>li>a, .WXHeadline.x-nav-tabs>li>a:hover {
    box-shadow: transparent;
    border: transparent;
    border-bottom: none;
    background: transparent;
    text-decoration-color: white; 
    color: white;
} 

..WXHeadline.x-nav-tabs > .active > a, .WXHeadline.x-nav-tabs > .active > a:hover {
    border-width: 0px !important;
}

.WXHeadline.x-nav-tabs>li>a, .WXHeadline.x-nav-tabs>li>a:hover {
    border-bottom: solid 0px;
}

[basanta]

Hi There,

Thanks for writing in!

Can you please add this CSS and let us know if that works!

.WXHeadline.x-nav-tabs {
box-shadow: none !important;
border: none !important;
}
.WXHeadline.x-nav-tabs li {
border-bottom: 0px;
}

Hope this helps!

[dlukefinch]

All sorted. Final code below. Is there any part which shouldn’t be included? I.e. isn’t doing much/anything.

.WXHeadline.x-nav-tabs {
box-shadow: none !important;
border: none !important;
text-decoration-color: white; 
color: white; 
}
.WXHeadline.x-nav-tabs li {
border-bottom: 0px; !important
box-shadow: inset 0 0px 0 0 white;
}

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
    box-shadow: #FFFFFF !important;
    box-shadow: inset 0 3px 0 0;
}

.WXHeadline.x-tab-content {
    border: white;
    box-shadow: none;
    color: white;
    background: transparent;
    margin-bottom: 0 !important;
} 

.WXHeadline.x-nav-tabs>li>a, .WXHeadline.x-nav-tabs>li>a:hover {
    background: transparent; 
    color: white;
}

[Prasant]

You are most welcome.