title: Breadcrumbs in Bootstrap are overlapping in IE
body: <p>I'm using the following code to create a breadcrumb trail, per specifications, for Bootstrap:</p>
  
  <pre><code>        &lt;div class="navbar-inner"&gt;
              &lt;ul class="breadcrumb pull-left"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Leave Management&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="searchLeave.html"&gt;New Leave or Call Log&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
                  &lt;li class="active"&gt;Search Results&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="nav pull-right" role="navigation"&gt;
                  &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Packages &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;package 1&lt;/a&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;a href="#"&gt;package 2&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;package 3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Leave Management &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
                          &lt;li&gt;&lt;a href="index.html"&gt;&lt;i class="icon-search"&gt;&lt;/i&gt; Nav item 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-edit"&gt;&lt;/i&gt; Nav item 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-inbox"&gt;&lt;/i&gt; Nav item 3&lt;/a&gt;&lt;/li&gt;
                                                  &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a data-toggle="modal" role="button" href="#helpModal"&gt;Help&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>In IE, I'm getting " Home / Leave Management / " displaying normally, however, the third (active) item is overlapping the previous level significantly (the 'S' in Search Results, beginning on top of the 'm' in Management.)  It doesn't matter what values I put in there, the breadcrumbs never display properly beyond the second level.</p>
  
  <p>Can anyone help?</p>
  
  <p>UPDATE: I edited my code to include more around the problem. The actual problem area is ul.breadcrumb</p>