Breadcrumbs in Bootstrap are overlapping in IE

internet-explorer, layout, twitter-bootstrap

Solution

Here is a logged bug that sounds about the same as your issue.

The suggested solution is adding this...

.breadcrumb li {
    margin-right: 1px;
}

Problem

I'm using the following code to create a breadcrumb trail, per specifications, for Bootstrap: ``` <div class="navbar-inner"> <ul class="breadcrumb pull-left"> <li><a href="#">Home</a> <span class="divider">/</span></li> <li><a href="index.html">Leave Management</a> <span class="divider">/</span></li> <li><a href="searchLeave.html">New Leave or Call Log</a> <span class="divider">/</span></li> <li class="active">Search Results</li> </ul> <ul class="nav pull-right" role="navigation"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Packages <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a href="#">package 1</a></li> <li><a href="#">package 2</li> <li><a href="#">package 3</a></li> </ul> </li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Leave Management <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a href="index.html"><i class="icon-search"></i> Nav item 1</a></li> <li><a href="#"><i class="icon-edit"></i> Nav item 2</a></li> <li><a href="#"><i class="icon-inbox"></i> Nav item 3</a></li> </ul> </li> <li><a data-toggle="modal" role="button" href="#helpModal">Help</a></li> <li><a href="#">Logout</a></li> </ul> </div> ``` 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. Can anyone help? UPDATE: I edited my code to include more around the problem. The actual problem area is ul.breadcrumb

Original source