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;
}

Answer 2

I was able to fix this in IE by simply removing the pull-right class.

Bootstrap has the badges styled for nav-tabs. The pull-right class is not necessary.

Answer 3

In the span element just remove the pull-right class and shift the header text to the left of the span tag. In The css,for badge class make white-space as important. Make the display of ul as a table and put the table-layout fixed.

In the list element use the style display:table-cell

Try the following example:

/*In Css*/
.badge {
  display: inline-block;
  white-space: nowrap !important;
}

And in your HTML

 <ul class="nav nav-tabs" style="vertical-align: top; width: 100%; display: table;table-layout: fixed;">

    <li class="active" style="display: table-cell">
        <a href="#Inbound" data-toggle="tab" `enter code here`style="text-decoration: none">Messages<span class="badge" runat="server" id="MsgCount">0</span>
       </a>
    </li>
</ul>