Firefox czasami renderuje HTML niepoprawnie

Opracowałem menu css i działało ono dobrze we wszystkich przeglądarkach w moim teście (czysty html / css). Kiedy wprowadziliśmy kod do naszego środowiska programistycznego działającego na CakePHP, zaczęliśmy widzieć błąd menu czasami w Firefoksie (3.5.2). Zdarza się to w żadnej innej przeglądarce. Sprawdziłem źródło, kiedy wystąpił błąd i tak to wygląda (drugi blok li poniżej jest taki, jak powinien wyglądać):

<div class="nav1">
<ul id="dropnav">
    <li id="dashboard">
        <a href="/businesses/dashboard"/>
        <div>
            <span class="white caps">
                <a href="/businesses/dashboard">Dashboard</a>
            </span>
            <a href="/businesses/dashboard">
                <br/>
                <small>At-a-glance view of all your stuff</small>
            </a>
        </div>
    </li>
    <li id="listing" class="active">
        <a href="/businesses/edit_profile">
        <div>
            <span class="white caps">Listing</span>
            <br/>
            <small>View and edit your listing</small>
        </div>
        </a>
    </li>
</ul></div>

Oto odpowiedni CSS:


span.caps { text-transform:uppercase; }
.white{color:#fff;}
.nav1 { background: url('../images/gradients/nav1.gif') repeat-x; height:50px; }
.nav1 #dropnav { list-style-type:none; margin:0; height:50px;float:left;line-height:1; }
.nav1 #dropnav li { padding:8px 10px 7px 10px; border-left: 1px solid #3ba2da; border-right: 1px solid #1f74a3;float:left;position:relative; }
.nav1 #dropnav li div { position:relative; float:left; padding-top:5px; }
.nav1 #dropnav li a { padding:0 0 6px 40px; float:left; text-decoration:none;}
.nav1 #dropnav li:hover, .nav1 #dropnav li.active { background: #3b3b3b; }
.nav1 #dropnav li#first:hover, .nav1 ul li#last:hover {background:none;}
.nav1 #dropnav li:hover small, .nav1 #dropnav li.active small{ color:#fff; }
.nav1 small { line-height:1.2em; color:#111; }
.nav1 span { font-weight:bold; }
.nav1 #dashboard a{ background: url('../images/icons/nav134.png') no-repeat 0 -102px; }
.nav1 #listing a{ background: url('../images/icons/nav134.png') no-repeat 0 -68px; }
.nav1 #messages a{ background: url('../images/icons/nav134.png') no-repeat 0 -34px; }
.nav1 #tools a{ background: url('../images/icons/nav134.png') no-repeat 0 0; }

Wiem, że może być wiele problemów, ale staram się je zawęzić.

questionAnswers(4)

yourAnswerToTheQuestion