Firefox rendering HTML incorrect sometimes

Question

I developed a css menu and it has worked fine across all browsers in my testing (pure html/css). When we brought the code into our development environment which is running on cakePHP, we started seeing the menu bug out sometimes in Firefox (3.5.2). It happens in no other browser. I checked the source when the bug occurs and this is what it looks like (the other li block below it is how it is supposed to look):

<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>

Here's the relevant 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; }

I know there could be a number of problems but I'm trying to narrow it down.

Answer 1

Well, what leaps out at me is that in the first <li>, your outer <a href="/businesses/dashboard"/> is enclosing nothing and closed using />, which doesn't seem like it's likely to be what you want. Possibly Firefox 3.5.2 is more sensitive to this than other browsers for some reason, but it seems like the problem is in whatever's generating that HTML.

Answer 2

You are not allowed to have a div inside a link. Firefox automatically corrects this the way it thinks you meant it to be. Of course a machine can't really guess what it is you tried, so it 'bugs out'

In fact, apparently FireFox is the only browser that even sees that you made a mistake. The other browsers just ignore your improper HTML.

Try removing the div, and just give the <a> a display:block property in the stylesheet.

Answer 3

As mentioned in comments, your markup is not strictly valid (empty a or div inside a). To me, this means that, while it may render the way you want in most browsers, it's meaningless to say it renders 'correctly' here and not there.

My advice is to fix your markup so that it validates first. Once you have valid markup, you can expect nice browsers like recent Firefox to render it 'correctly' and then troubleshoot any browser-specific issues that remain.

w3c validator: http://validator.w3.org/

Answer 4

Remember, this IS correct code in HTML5.

http://html5doctor.com/block-level-links-in-html-5/