Firefox syntax issue when placing an <li> inside of an <a> - not linkable?

You'll want to style up the a inside the li making it's width and height 100%, here's some other suggestions:

http://doctype.com/make-li-clickable-target-url

Why not just put the anchor tags inside the LI elements? That's how it's usually done.

<ul> doesn't support <a> as a child, your html is not properly formatted, try this instead:

<div id="header"> <ul> <li id="supplements-link"><a href="/"></a></li> <li id="tutorials-link"><a href="/tutorials/"></a></li> <li id="blog-link"><a href="/blog/"></a></li> </ul> </div> 

You need to put a's inside li's, and then display: block; in your CSS, this will make the whole li a link instead of just the text, which I think is what you're probably trying to achieve?

That way you then add padding etc to your <a> tag to make the link blocks bigger. This will solve the FF issue:

CSS:

#header ul li a { display: block; padding: 10px; } 

HTML:

<div id="header"> <ul> <li id="supplements-link"><a href="/">Supps link</a></li> <li id="tutorials-link"><a href="/tutorials/">Tuts link</a></li> <li id="blog-link"><a href="/blog/">Blog link</a></li> </ul> </div>