How to remove border on active li tab

Question

I have a list ul with items li. Under the list there is a box surrounded with border. The top border of the box is also the bottom border of the list items.

What I want to do know is to remove the bottom border of the active tab. That means removing the top border of the content box along the active tab. Is this possible or do I need to use a different approach?

li {
  display: inline-block;
  padding-top: 0;
  padding: 15px;
  border-right: 1px solid #e6e6e6;
  cursor: pointer;
  border-top: 1px solid #e6e6e6;
  font-family: 'Cera';
  font-size: 13px;
}

ul {
  list-style-type: none;
  margin: 0 auto;
  border-left: 1px solid #e6e6e6;
  padding-left: 0px;
}

.content-box {
  display: block;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  overflow: hidden;
  padding-bottom: 10px;
}

.active {
  position: relative;
  background-color: #f8f8f8;
  top: -3px;
}

<ul id="menu">
  <li class="active" data-nav="1">Prerender</li>
  <li data-nav="2">Prefetch</li>
  <li data-nav="3">Preconnect</li>
  <li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
  <h3 id="isPrerender"> Prerendered page:</h3>
  <ul class="results" id='pagetitle1'></ul>
</div>

Here's how I'd like it to look:

I would like to see a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve). — Andy Hoffman, Mar 21 '19 at 22:22

score 0 · Answer 1 · answered Mar 21 '19 at 22:42

If your idea is to slide down the tab to hide the border , then you should reset vetical-align on li (and eventually mind the white-space) , then increase the padding of 1px (for a one px border) and low it down of that extra pixel(s) like you tried.

li {
  display: inline-block;
  padding-top: 0;
  padding: 15px;
  border-right: 1px solid #e6e6e6;
  cursor: pointer;
  border-top: 1px solid #e6e6e6;
  font-family: 'Cera';
  font-size: 13px;
  vertical-align: bottom;
}

ul {
  list-style-type: none;
  margin: 0 auto;
  border-left: 1px solid #e6e6e6;
  padding-left: 0px;
}

.content-box {
  display: block;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  overflow: hidden;
  padding-bottom: 10px;
}

.active {
  position: relative;
  background-color: #f8f8f8;
  padding-bottom: 16px;/* increase height of 1 px here, can be any value you want */
  top: 1px;/* low it done at least the border's thickness to hide */
}

body {
  margin: 1em;
}

<ul id="menu">
  <li class="active" data-nav="1">Prerender</li><!-- kill that white space via comments 
  --><li data-nav="2">Prefetch</li><!--
  --><li data-nav="3">Preconnect</li><!--
  --><li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
  <h3 id="isPrerender"> Prerendered page:</h3>
  <ul class="results" id='pagetitle1'></ul>
</div>

showdev · Accepted Answer · 2019-03-21T23:08:53.587

I suggest that you use negative margin to overlap elements.

Use a margin-top:-1px to overlap the top border of the lower box with the bottom edge of the top boxes. This allows the background-color of the active top box to cover the top border of the lower box.

Use margin-left:-1px on all top boxes except the first one to overlap the borders on their left and right sides. Otherwise, with a border on only one side, the active box will be missing a piece of border where it rises above the others.

I've removed the white space between <li> elements because, since they are display:inline-block, that space is rendered as gaps between the boxes.

I'm using additional padding to raise the active top box, instead of using negative top. This keeps the text inside the active box at the same height as the other boxes.

I've aligned the top boxes with vertical-align:bottom to keep them flush against the bottom box.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  padding: 15px;
  margin-left: -1px;
  border-style: solid;
  border-color: #e6e6e6;
  border-width: 1px 1px 0 1px;
  cursor: pointer;
  font-family: 'Cera';
  font-size: 13px;
  vertical-align: bottom;
}

li:first-child {
  margin-left: 0;
}

.content-box {
  min-height: 100px;
  border: 1px solid #e6e6e6;
  margin-top: -1px;
  padding: 10px;
}

.active {
  background-color: #f8f8f8;
  padding-top: 18px; /* 15 + 3 */
}

<ul id="menu">
  <li data-nav="1">Prerender
  </li><li class="active" data-nav="2">Prefetch
  </li><li data-nav="3">Preconnect
  </li><li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
  <h3 id="isPrerender">Prefetched page:</h3>
  <ul class="results" id='pagetitle1'></ul>
</div>

How to remove border on active li tab

2 Answers2