Bootstrap dropdown caret not showing in Firefox - html

Question

I want to show a caret on the right side of a bootstrap dropdown button within a button-group.
My code is (see also this fiddle):
<div class="span3 well">
<div class="btn-group btn-block">
<a class="btn btn-primary dropdown-toggle btn-block" data-toggle="dropdown" href="#">
New … <i class="caret pull-right"></i>
</a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
and
.btn-group .dropdown-toggle {
padding-left: 10px;
padding-right: 10px;
}
In webkit (Safari & Chrome) it looks as intended:
However Firefox does not work:
Did I make a mistake here? Which behavior is correct? What should I do to make it work everywhere?
​

Answer 1

The btn-group was causing the problem:
.btn-block .dropdown-toggle {
padding-left: 10px;
padding-right: 10px;
}
<div class="span3 well">
<div class="btn-block"> <!-- <<< Right here is where I removed btn-group -->
<a class="btn btn-primary dropdown-toggle btn-block" data-toggle="dropdown" href="#">
New … <i class="caret pull-right"></i>
</a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
http://jsfiddle.net/userdude/KdUdS/12/
It looks the same in Chrome as it does in Firefox.
EDIT
Here's the problem:
.btn-group {
font-size: 0;
position: relative;
vertical-align: middle;
white-space: nowrap; // <<< This here
}
That's on line 3438 of bootstrap.css. I fixed it with:
<div class="btn-block btn-group" style="white-space: normal;">
http://jsfiddle.net/userdude/KdUdS/14/
Now the dropdown elements don't look so hot, but I assume you know that are going to fix that.