border on bootstrap tabs content - css

Question

I want to add a border to my tab content. There should be no border at the bottom of the selected tab. I found this questions: how to give a border to bootstrap tab contents, but the answers didn't work for me?
HTML:
<ul class="nav nav-tabs pull-right">
<li><a data-toggle="tab" href="#sub_cats_8">תתי קטגוריות</a></li>
<li class="active"><a data-toggle="tab" href="#category_8">קטגוריה</a></li>
</ul>
<div class="clearfix"></div>
<div class="tab-content" style="height: 100%;">
<div id="category_8" class="tab-pane fade in active category" style="background-image: url('example.jpg');">
<h1> קוסמטיקה </h1>
</div>
<div id="sub_cats_8" class="tab-pane fade">
<ul class="sub_categories">
<li>איפור</li>
</ul>
</div>
</div>
CSS:
body, html {
direction: rtl;
height: 100%;
font-family: Tahoma;
}
.nav-tabs {
direction: ltr;
}
#logo {
background-color: #005CB8;
width: 100%;
color: white;
padding: 4% 10%;
-webkit-box-shadow: 20px 10px 20px #003972;
-moz-box-shadow: 20px 10px 20px #003972;
box-shadow: 20px 10px 20px #003972;
border-bottom-left-radius: 50px;
}
#logo h1, #logo h4 {
display: inline;
font-family: head;
}
#logo h1 {
font-size: 550%;
}
#logo h4 {
font-size: 220%;
}
.navbar-inverse {
background-color: #477199;
font-weight: bold;
}
.nav.navbar-nav.navbar-right li a {
color: white;
}
.nav.navbar-nav li a {
color: white;
}
.navbar-inverse .navbar-nav > .active {
background-color: #003972;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
color: white;
background: #003972;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
background-color: #324F6B;
color: white;
}
.category {
text-align: center;
margin-top: 1px;
background-size: 100% 100%;
padding: 15% 0;
}
.category h1 {
color: white;
font-family: head;
font-size: 500%;
text-shadow: 2px -2px black;
}
.category_start {
margin: 0 auto;
width: 85%;
}
.sub_categories {
-webkit-columns: auto 3;
/* Chrome, Safari, Opera */
-moz-columns: auto 3;
/* Firefox */
columns: auto 3;
list-style-type: disc;
margin-top: 5px;
}
.category_start .container {
margin-top: 10px;
}
.product_image {
height: 80px;
width: 80px;
}
.products_sub_list {
margin: 10px auto 0;
text-align: center;
max-width: 80%;
border-radius: 7px;
}
.products_sub_list td {
width: 15%;
max-width: 15%;
padding: 0 5px;
border: 3px solid #46617A;
}
.product {
width: 80%;
border: 3px solid #46617A;
margin: 0 auto;
text-align: center;
border-radius: 10px;
}
.product_table td {
border: 2px solid #46617A;
padding: 13px;
}
.product_table {
display: inline-table;
margin-left: 15px;
margin-bottom: 8px;
}
.product_table td:first-child {
font-weight: bold;
}
.page {
width: 85%;
margin: 0 auto;
padding: 15px 25px;
border: 2px solid #46617A;
border-radius: 10px;
background-color: #C8D0D7;
}
.register {
margin: 0 auto;
width: 80%;
text-align: center;
}
.register td {
padding: 5px;
text-align: right;
}
.register table {
margin-right: 240px;
}
#register {
width: 80%;
position: absolute;
z-index: 2;
display: none;
left: 0;
right: 0;
top: 100px;
margin: 0 auto;
border: 3px solid #0066FF;
background-color: #CCE0FF;
text-align:center;
border-radius: 10px;
}
#bbg {
display: none;
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.8;
filter: alpha(opacity=80);
}
.tab-content {
border: 1px solid #ddd;
padding: 1px;
}
JSFiddle: http://jsfiddle.net/ep2drocb/7/
Notice there is border in the open tab, also the closed tabs have a double border.

Answer 1

The main problem is the pull-right on the ul element.
Remove pull-right class from the ul
Remove the clear-fix element as it's not needed anymore
Remove top border from your tab-content class
Float the lis right
Correct the margins on the tab anchors
Relevant HTML:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#category_8">תתי קטגוריות</a></li>
<li><a data-toggle="tab" href="#sub_cats_8">קטגוריה</a></li>
</ul>
<div class="tab-content">
<div id="category_8" class="tab-pane fade in active category">
<h1> קוסמטיקה </h1>
</div>
<div id="sub_cats_8" class="tab-pane fade">
<ul class="sub_categories">
<li>איפור</li>
</ul>
</div>
</div>
Relevant CSS:
.tab-content {
border: 1px solid #ddd;
border-width: 0 1px 1px; /* Removes the top border */
padding: 1px;
}
.nav-tabs > li {
float: right;
}
.nav-tabs > li > a {
margin-right: 0;
margin-left: 2px;
}
JSFiddle: http://jsfiddle.net/ep2drocb/9/
That should get you on the right track.