CSS适用于Chrome，但不适用于IE或Firefox

Question

I'm developing a website for a client and attempting to add multiple menus to a single page. They are labeled completely differently, and as of now, one of the menus is just a list. It has no css formatting, and isn't linked to a stylesheet at all. The first menu may be a cause of the problem. Anyway, I have a list like so:

<ul>
    <li><a href="#"><span>All</span></a></li>
    <li><a href="#"><span>Test Category</span></a></li>
    <li><a href="#"><span>Another test</span></a></li>
    <li><a href="#"><span>More tests</span></a></li>
    <li><a href="#"><span>Categories</span></a></li>
</ul>

This works just fine in Google Chrome, however whenever I open it in Firefox or Internet Explorer, it formats it like so: http://gyazo.com/74157a833e0bff1e62a2a6cba5db5f5f

As I'm not quite sure what the source of the problem is, it's too large to post, and CSS and HTML are client side, I'll refrain from posting all of the code here, but feel free to look at my code at http://www.capbig.tk

Note: The server which the website is currently hosted on can become unresponsive occasionally. It will simply return a blank page. Please be patient, I know you're trying to help me, so I apologize for any inconvenience.

Any help is greatly appreciated. Thank you!

Answer 1

Put this in your style sheet.

#categories{
  clear:both;

}

Now keep in mind that the list will be pushed down some, but that is because you are positioning your top list up by -100px.