Invalid HTML HTML
I designed a css menu and it worked fine in all browsers in my testing (pure html / css). When we pushed the code into our development environment that runs on cakePHP, we sometimes started throwing a menu error in Firefox (3.5.2). This is not happening in another browser. I checked the source when the error occurred and this is what it looks like (another li block below is how it should look like):
<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 can be many problems, but I am trying to narrow it down.
You are not allowed to have a div inside a link. Firefox automatically fixes it the way it thinks you meant it. Of course, the machine cannot guess what exactly you tried, so it "bugs out"
In fact, FireFox appears to be the only browser that even sees that you've made a mistake. Other browsers will simply ignore your incorrect HTML.
Try removing the div and just give <a> a display: block property in your stylesheet.
source to share
Well what I get is that in the first, <li>
your outer <a href="/businesses/dashboard"/>
doesn't close anything and closes with a help />
that doesn't seem to be the way you want it. Perhaps Firefox 3.5.2 is more sensitive to this than other browsers for some reason, but it looks like the problem is with what is generating this HTML.
source to share
As mentioned in the comments, your markup is not strictly valid (empty a or div inside a). To me this means that while it may look the way you want it in most browsers, it makes no sense to say that it is "right" here and not there.
My advice is to fix your markup so that it checks first. Once you have valid markup, you can expect good browsers like recent Firefox to render "correctly" and then fix any remaining browser-related issues.
w3c validator: http://validator.w3.org/
source to share