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 ca

Answer 1

Remember, this IS correct code in HTML5.

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

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

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.