Twitter Bootstrap: Icon rendered differently in IE vs Firefox - css

Question

I'm using the latest twitter Bootstrap (non-modified). The below HTML produces different result in IE and Firefox:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Test</p><a href:"..."> <span class="glyphicon glyphicon glyphicon-refresh"></span></a></li>
</ul>
</div>
</div>
In IE the icon (or font, the icons are fonts now days) is rendered properly after the text "test" on the same line. In Firefox the icon is rendered below the text. I would like both to render the icon on the same line. Anyone knows what is going on?

Answer 1

The short answer is: IE is doing it wrong.
In your <li>, you have 2 block elements, a <p> and an <a>. Block elements form blocks, therefore if you want them inline, either change them to inline-block, or if the menu items are unrelated, i.e. Test goes somewhere different than the refresh icon, put them each in their own <li>, like so:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Test</p></li>
<li><a href:"..."> <span class="glyphicon glyphicon glyphicon-refresh"></span></a></li>
</ul>
</div>
</div>
Note from comment: <a> tags are normally inline, but twitter bootstrap css specifically sets the <a> tag in the <nav> under <li> to block. .nav>li>a {display: block;}