Count indicator adds extra spaces in a CSS menu - css

Question

I need to add Faceboook style count indicators to a CSS menu. You can see it here: JSFIDDLE
The problem is that count indicators (with orange background) creates extra spaces and I can't understand why.
First problem:
As you can see in the above image, the texts "Two" and "Four" (with number indicators) are placeed 1px lower than texts "One" and "Three" (without number indicators).
Second problem:
As you can see the width of left and right margins of the text "Two" (with number indicator) are different. The with of left margin is 10px as it should be but the width of right margin is 15px.
My code:
html{height:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote{padding:0;margin:0;}
body{cursor:default;font:11px/13px verdana,tahoma,arial;color:#333;background-color:#ffffff;}
div#xx2menus{margin:0px auto;width:968px;height:36px;background:#5B4B40;background: -webkit-linear-gradient(#776753, #5B4B40);background: -o-linear-gradient(#776753, #5B4B40);background: -moz-linear-gradient(#776753, #5B4B40);background: linear-gradient(#776753, #5B4B40);border:1px solid #362D26;border-radius:3px;z-index:999}
#xx2menu,#xx2menu ul{list-style:none;}
#xx2menu{float:left;font-family:Arial;}
#xx2menu > li{float: left;}
#xx2menu li a{display:block;padding:11px 10px 12px 10px;text-decoration:none;}
#xx2menu ul {position:absolute;display:none;z-index:999;}
#xx2menu ul li a{width:80px;}
#xx2menu li:hover ul{display: block;}
#xx2menu > li > a{color: #fff;font-weight:700;}
#xx2menu > li:hover > a{background: #EAD593;color: #000;}
#xx2menu ul{border-bottom-right-radius:3px;border-bottom-left-radius:3px}
#xx2menu ul li a{color:#000;}
#xx2menu ul li:hover a{background: #ffc97c;}
span.badge{
display:inline-block;
padding: 1px 5px 1px 5px;
text-align:center;
color:#fff !important;
font-size:10px;
line-height:13px;
/*-webkit-border-radius:3px;*/
-moz-border-radius:3px;
border-radius:3px;
-o-border-radius:3px;
-khtml-border-radius:3px;
}
a span.badge{
position:relative;
top:-16px;
right:5px;
margin:0;
}
span.badge.on{
background-color:#f60;
color: #ffffff !important;
}
.lsub:nth-child(odd){background-color:#EFDEAB}
.lsub:nth-child(even){background-color:#EAD593;}
HTML
<div id="xx2menus">
<ul id="xx2menu">
<li>One</li>
<li>Two<span class="badge on">5</span></li>
<li>Three</li>
<li>Four<span class="badge on">17</span>
<ul>
<li class="lsub">Submenu1</li>
<li class="lsub">Submenu2</li>
</ul>
</li>
</ul>
</div>

Answer 1

here is your answer, what you have to do is
a span.badge{position:absolute;} but at the same time you have to change the
li a{position:relative} to control the position of the badges check the code below.
html{height:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote{padding:0;margin:0;}
body{cursor:default;font:11px/13px verdana,tahoma,arial;color:#333;background-color:#ffffff;}
div#xx2menus{margin:10px auto 0px;width:968px;height:36px;background:#5B4B40;background: -webkit-linear-gradient(#776753, #5B4B40);background: -o-linear-gradient(#776753, #5B4B40);background: -moz-linear-gradient(#776753, #5B4B40);background: linear-gradient(#776753, #5B4B40);border:1px solid #362D26;border-radius:3px;z-index:999}
#xx2menu,#xx2menu ul{list-style:none;}
#xx2menu{float:left;font-family:Arial;}
#xx2menu > li{float: left;}
#xx2menu li a{display:block;padding:11px 10px 12px 10px;text-decoration:none;}
#xx2menu ul {position:absolute;display:none;z-index:999;}
#xx2menu ul li a{width:80px;}
#xx2menu li:hover ul{display: block;}
#xx2menu > li > a{color: #fff;font-weight:700;}
#xx2menu > li:hover > a{background: #EAD593;color: #000;}
#xx2menu ul{border-bottom-right-radius:3px;border-bottom-left-radius:3px}
#xx2menu ul li a{color:#000; position:relative; display:inline-block;}
#xx2menu ul li:hover a{background: #ffc97c;}
span.badge{
display:inline-block;
padding: 1px 5px 1px 5px;
text-align:center;
color:#fff !important;
font-size:10px;
line-height:13px;
/*-webkit-border-radius:3px;*/
-moz-border-radius:3px;
border-radius:3px;
-o-border-radius:3px;
-khtml-border-radius:3px;
}
li a{ position:relative; display:inline-block;}
a span.badge{
position:absolute;
top:-5px;
right:0px;
margin:0;
}
span.badge.on{
background-color:#f60;
color: #ffffff !important;
}
.lsub:nth-child(odd){background-color:#EFDEAB}
.lsub:nth-child(even){background-color:#EAD593;}
<div id="xx2menus">
<ul id="xx2menu">
<li>One</li>
<li>Two<span class="badge on">5</span></li>
<li>Three</li>
<li>Four<span class="badge on">17</span>
<ul>
<li class="lsub">Submenu1</li>
<li class="lsub">Submenu2</li>
</ul>
</li>
</ul>
</div>

Answer 2

You need to give the badges an absolute position, inside a relative parent, and set some proper margins to them.
#xx2menu > li > a{
color: #fff;font-weight:700;position: relative;
}
a span.badge{
position:absolute;
top:0;
right:5px;
margin:-7px -7px 0 0;
}
http://jsfiddle.net/ufj27m4w/12/

Answer 3

Add position: relative to #xx2menu > li or #xx2menu > li > a and position: absolute to a span.badge
html{height:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote{padding:0;margin:0;}
body{cursor:default;font:11px/13px verdana,tahoma,arial;color:#333;background-color:#ffffff;}
div#xx2menus{margin:0px auto;width:968px;height:36px;background:#5B4B40;background: -webkit-linear-gradient(#776753, #5B4B40);background: -o-linear-gradient(#776753, #5B4B40);background: -moz-linear-gradient(#776753, #5B4B40);background: linear-gradient(#776753, #5B4B40);border:1px solid #362D26;border-radius:3px;z-index:999}
#xx2menu,#xx2menu ul{list-style:none;}
#xx2menu{float:left;font-family:Arial;}
#xx2menu > li{float: left;position: relative;}
#xx2menu li a{display:block;padding:11px 10px 12px 10px;text-decoration:none;}
#xx2menu ul {position:absolute;display:none;z-index:999;}
#xx2menu ul li a{width:80px;}
#xx2menu li:hover ul{display: block;}
#xx2menu > li > a{color: #fff;font-weight:700;}
#xx2menu > li:hover > a{background: #EAD593;color: #000;}
#xx2menu ul{border-bottom-right-radius:3px;border-bottom-left-radius:3px}
#xx2menu ul li a{color:#000;}
#xx2menu ul li:hover a{background: #ffc97c;}
span.badge{
display:inline-block;
padding: 1px 5px 1px 5px;
text-align:center;
color:#fff !important;
font-size:10px;
line-height:13px;
/*-webkit-border-radius:3px;*/
-moz-border-radius:3px;
border-radius:3px;
-o-border-radius:3px;
-khtml-border-radius:3px;
}
a span.badge{
position: absolute;
top: -4px;
right: 0px;
margin: 0;
}
span.badge.on{
background-color:#f60;
color: #ffffff !important;
}
.lsub:nth-child(odd){background-color:#EFDEAB}
.lsub:nth-child(even){background-color:#EAD593;}
<div id="xx2menus">
<ul id="xx2menu">
<li>One</li>
<li>Two<span class="badge on">5</span></li>
<li>Three</li>
<li>Four<span class="badge on">17</span>
<ul>
<li class="lsub">Submenu1</li>
<li class="lsub">Submenu2</li>
</ul>
</li>
</ul>
</div>