Struggling with badge pull-right in horizontal tab (IE9 only)

Question

I have a fiddle that words in IE8, Chrome and Firefox but fails in IE9.

I'm using bootstrap 2.3.2 and I want the badges to be on the same line as the text but on the right. This works in every browser but IE9. In IE9 the badge shows up below the text.

See: http://jsfiddle.net/DvxHe/

<div class='tabs-left'>
  <ul class='nav nav-tabs'>
    <li>
      <a href="#specializations_tab" data-toggle="tab">
        Specializations
        <span id="specializations-count" class="badge badge-info section-count pull-right">
          0
        </span>
      </a>
    </li>
    <!-- lots more like above -->
  </ul>
</div>

Answer 1

You should specify the width of the nav-tabs either by user bootstrap colums layout or by setting a fixed width. As a test, by simply adding style="width:180px" to the nav-tabs, everything is fine.

See the updated Fiddle that has the following CSS:

.nav-tabs {
    width:180px;
}