Tiziano Mischi Tiziano Mischi - 6 months ago 20
HTML Question

Space among nested tabs

Anyone can explain me why in the nested tabs i have it inside the second tab (the one named "Letture") there is a space on the right of the tab while in the first one it isn't? The CSS code for both tabs is the same, I don't see it why they behave differently



$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');

$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');

$(this).addClass('current');
$("#"+tab_id).addClass('current');

$('ul.tabs li').each(function () {
var nimg = $(this).find('img').attr('src');
$(this).find('img').attr('src', nimg.replace('_r', '_g'));
});

var img = $(this).find( 'img' ).attr('src');
$(this).find( 'img' ).attr('src', img.replace('_g', '_r'));

});
$("ul.subtabs li").click(function(){
var tab_id = $(this).attr("data-tab");

$("ul.subtabs li").removeClass("current");
$(".subtab-content").removeClass("current");

$(this).addClass("current");
$("#"+tab_id).addClass("current");

$("ul.subtabs li").each(function () {
var nimg = $(this).find("img").attr("src");
$(this).find("img").attr("src", nimg.replace("_r", "_g"));
});

var img = $(this).find( "img" ).attr("src");
$(this).find( "img" ).attr("src", img.replace("_g", "_r"));
});

ul.tabs, ul.subtabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li, ul.subtabs li{
line-height: 24px;
background: #ededed;
color: #777;
display: inline-block;
padding: 10px 40px;
cursor: pointer;
font: 16pt arial,verdana !important;
border: 1px solid rgb(164, 162, 162);
border-right: medium none;
}

ul.tabs li.current, ul.subtabs li.current{
background: none;
color: rgb(227,32,46);
border-bottom: 0;
border-top: 3px solid rgb(227,32,46);
padding-top: 8px;
}

.tab-content, .subtab-content {
display: none;
padding-top: 15px;
}

.tab-content.current, .subtab-content.current {
display: inherit;
}

ul.tabs > li > img, ul.subtabs > li > img {
margin-right: 5px;
width: 24px;
height: 24px;
}

.tabLast {
border-right: 1px solid rgb(164, 162, 162) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tabs">
<li data-tab="tab-1" class="tab-link"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png"> Amministratore</li><li data-tab="tab-2" class="tab-link current"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_r.png"> Letture</li><li data-tab="tab-3" class="tab-link"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png"> Unità immobiliari</li><li data-tab="tab-5" class="tab-link tabLast"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png"> Riparti</li></ul>
<div data-loaded="1" class="tab-content" id="tab-1"><div class="mb20">&nbsp;</div><h3>Amministratore</h3></div>
<div data-loaded="1" class="tab-content current" id="tab-2"><ul class="subtabs">
<li data-tab="tab-af" class="tab-link"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png"> Acqua fredda</li>
<li data-tab="tab-ac" class="tab-link"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png"> Acqua calda</li>
<li data-tab="tab-ca" class="tab-link tabLast current"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_r.png"> Calore</li>
</ul><div id="tab-af" class="subtab-content" data-loaded="1">Freddo!</div>
<div id="tab-ac" class="subtab-content" data-loaded="1">Caldo!</div>
<div id="tab-ca" class="subtab-content current" data-loaded="1">Calore!</div>
</div>




Answer

it is because they are displayed as inline-block which are an inline element, and therefore creates a gap, so one way to solve this is set font-size:0 to parent ul.

See more info here

$('ul.tabs li').click(function() {
  var tab_id = $(this).attr('data-tab');

  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('current');

  $(this).addClass('current');
  $("#" + tab_id).addClass('current');

  $('ul.tabs li').each(function() {
    var nimg = $(this).find('img').attr('src');
    $(this).find('img').attr('src', nimg.replace('_r', '_g'));
  });

  var img = $(this).find('img').attr('src');
  $(this).find('img').attr('src', img.replace('_g', '_r'));

});
$("ul.subtabs li").click(function() {
  var tab_id = $(this).attr("data-tab");

  $("ul.subtabs li").removeClass("current");
  $(".subtab-content").removeClass("current");

  $(this).addClass("current");
  $("#" + tab_id).addClass("current");

  $("ul.subtabs li").each(function() {
    var nimg = $(this).find("img").attr("src");
    $(this).find("img").attr("src", nimg.replace("_r", "_g"));
  });

  var img = $(this).find("img").attr("src");
  $(this).find("img").attr("src", img.replace("_g", "_r"));
});
ul.tabs,
ul.subtabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-size:0
}
ul.tabs li,
ul.subtabs li {
  line-height: 24px;
  background: #ededed;
  color: #777;
  display: inline-block;
  padding: 10px 40px;
  cursor: pointer;
  font: 16pt arial, verdana !important;
  border: 1px solid rgb(164, 162, 162);
  border-right: medium none;
}
ul.tabs li.current,
ul.subtabs li.current {
  background: none;
  color: rgb(227, 32, 46);
  border-bottom: 0;
  border-top: 3px solid rgb(227, 32, 46);
  padding-top: 8px;
}
.tab-content,
.subtab-content {
  display: none;
  padding-top: 15px;
}
.tab-content.current,
.subtab-content.current {
  display: inherit;
}
ul.tabs > li > img,
ul.subtabs > li > img {
  margin-right: 5px;
  width: 24px;
  height: 24px;
}
.tabLast {
  border-right: 1px solid rgb(164, 162, 162) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tabs">
  <li data-tab="tab-1" class="tab-link">
    <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png">Amministratore</li>
  <li data-tab="tab-2" class="tab-link current">
    <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_r.png">Letture</li>
  <li data-tab="tab-3" class="tab-link">
    <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png">Unità immobiliari</li>
  <li data-tab="tab-5" class="tab-link tabLast">
    <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png">Riparti</li>
</ul>
<div data-loaded="1" class="tab-content" id="tab-1">
  <div class="mb20">&nbsp;</div>
  <h3>Amministratore</h3>
</div>
<div data-loaded="1" class="tab-content current" id="tab-2">
  <ul class="subtabs">
    <li data-tab="tab-af" class="tab-link">
      <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png">Acqua fredda</li>
    <li data-tab="tab-ac" class="tab-link">
      <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png">Acqua calda</li>
    <li data-tab="tab-ca" class="tab-link tabLast current">
      <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_r.png">Calore</li>
  </ul>
  <div id="tab-af" class="subtab-content" data-loaded="1">Freddo!</div>
  <div id="tab-ac" class="subtab-content" data-loaded="1">Caldo!</div>
  <div id="tab-ca" class="subtab-content current" data-loaded="1">Calore!</div>
</div>