different styles for labels inside CSS tab setup - html

Question

Hopefully tis is a reallllly easy fix that I'm just not seeing, but I've been trying every solution I could find that arched even close to this in previously submitted questions and I'm just getting nowhere.
The short of it: I've got a CSS tab setup working that's great, EXCEPT for when it comes to styling the actual labels on the tabs. It works great with a single style, but as soon as I try to introduce a secondary font style (bringing the font size down to 11px), the right hand side of the tab disappears.
And unfortunately I NEED to be able to have those two different font sizes/styles displayed in the tab label. I've tried using span, div, etc. treatments but everything makes the right border of the tab go away. Any help is HUGELY appreciated!
Here's a fiddle: http://jsfiddle.net/wKtPL/
Here's my sample HTML:
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Library <div class='tab-count'> 123</div></label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Institution’s Subscriptions</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Copyright Agent</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Internet Archive</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">HathiTrust</label>
<div class="content">
content goes here
</div>
</div>
And the CSS behind it:
.tabs {
position: relative;
min-height: 550px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #dadcde;
color: #3f4b54;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
font-size: 14px;
font-weight:bold;
margin-right:5px;
}
.tab-count {
font-size: 11px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 3px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}

Answer 1

By secondary font style do you mean the div nested in the label? If that's the one with class .tab-count you could set float:right. That will keep it in the same line.
.tab-count {
font-size: 11px;
float:right;
}

Answer 2

A couple of things, firstly the 123 is being hidden under the .content so you need a taller top value.
Secondly, your labels, while being position: relative; are still only being implicitly rendered as display: inline;, so it's hiding the 123 div underneath the label itself.
http://jsfiddle.net/wKtPL/1/
.tab label {
[ ... ]
display: inline-block;
min-height: 2.5em;
}
.content {
[ ... ]
top: 60px;
}
... and muck with styling as you need.

Answer 3

This is caused by the usage of a block element inside your label element, which is an inline element. To fix this, change your <div class='tab-count'> 123</div> to <span class='tab-count'> 123</span>. Here is a demo of it.
If you want to allow block-level elements to be placed within inline elements, you could like #setek said, use the alternative inline-block which is a kind of hybrid of block elements and inline elements.
You should never use block elements inside inline elements, since that will cause problems like this one. What was happening was that the styles for the inline <label> tag were being dragged across 2 lines, since the <div> was taking up an extra line. That dragged the left border down a line too, which is why you didn't see it anymore (it was below the other tabs).