Navigation bar (browser compatibility problems)

[sgsecret]

Hey im having trouble getting this navigation bar to work on firefox. It works perfectly fine on chrome though. Heres the code:

CSS:

<style>
nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}

nav ul {
	background: #080808 ; 
	background: linear-gradient(top, #080808 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #080808 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #080808 0%,#bbbbbb 1500%); 
	-moz-box-shadow: 1px 2px 9px rgba(0,0,0,0.15);
	-webkit-boxshadow: 1px 2px 9px rgba(0,0,0,0.15);
        box-shadow: 1px 2px 9px rgba(0,0,0,0.15);
	padding: 0px 0px;
        -moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius: 6px;
  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

nav ul li {
	float: left; 
}
	nav ul li:hover {
		background: #101010;
		background: linear-gradient(top, #bf0000 0%, #700000  40%);
		background: -moz-linear-gradient(top, #bf0000 0%, #700000  40%);
		background: -webkit-linear-gradient(top, #bf0000 0%, #700000  40%);
                -moz-border-radius:6px;
	        -webkit-border-radius:6px;
                border-radius: 6px;
	}
		nav ul li:hover a {
			color: #fff;
		}
	
	nav ul li a {
		display: block; padding: 15px 25px;
		color: #F8F8F8; text-decoration: none;
               
	}


nav ul ul {
	background: #202020; border-radius: 10px; padding: 5px;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 0px solid #6b727c;
		border-bottom: 0px solid #000000;
		position: relative;
	}
		nav ul ul li a {
			padding: 2px 20px 7px 7px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: ;
			}

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

#navbar {
position: relative;
overflow: visible;
z-index: 100;
}
</style>

HTML

<div id="navbar"><nav>
<ul>
<li><a href="http://www.sentinelgaming.net">Home</a></li>
<li><a href="http://www.sentinelgaming.net/communityinfo">Community</a>
  <ul>
    <li><a href="http://www.sentinelgaming.net/communityinfo">About Us / Info</a></li>
    <li><a href="http://www.sentinelgaming.net/servers">Servers</a></li>
    <li><a href="http://www.sentinelgaming.net/members">Members</a>
    <li><a href="http://www.sentinelgaming.net/staff">Meet The Staff</a></li>
    <li><a href="http://www.sentinelgaming.net/communityrules">Community Rules</a></li>
    <li><a href="http://www.sentinelgaming.net/donate">Premium Membership</a>					
  </li>
  </ul>
<li><a href="http://www.sentinelgaming.net/forums">Forums</a>
  <ul>
    <li><a href="http://www.sentinelgaming.net/forums">All Forums</a></li>
    <li><a href="http://www.sentinelgaming.net/forums/m/5770961/viewforum/1312499">Support</a>          </li>
    <li><a href="http://www.sentinelgaming.net/forums/m/5770961/viewforum/1312497">Introductions</a></li>
    <li><a href="http://www.sentinelgaming.net/forums/m/5770961/viewforum/1310799">General    Discussions</a></li>
    <li><a href="http://www.sentinelgaming.net/forums/m/5770961/show/newposts">Unread Posts</a></li>
  </ul>
  </li>
<li><a href="http://www.sentinelgaming.net/join">Join</a>
  <ul>
    <li><a href="http://www.sentinelgaming.net/join">Membership</a></li>
    <li><a href="http://www.sentinelgaming.net/apply">Leadership / Merge</a></li>				
  </ul>
  </li>
<li><a href="http://www.sentinelgaming.net/generalgamingnews">Content</a>
  <ul>
    <li><a href="http://www.sentinelgaming.net/generalgamingnews">General Gaming News</a></li>
    <li><a href="http://www.sentinelgaming.net/reviews">Reviews</a></li>					
  </li>
  </ul>
<li><a href="http://www.sentinelgaming.net/calendar">Events</a>
  <ul>
    <li><a href="http://www.sentinelgaming.net/calendar">Calendar</a></li>
  </li>
  </ul>
<li><a href="http://www.sentinelgaming.net/teamtac">Competitive</a>
  <ul>
    <li><a href="http://www.sentinelgaming.net/teamtac">Starcraft II</a></li>
  </li>
  </ul>
<li><a href="http://www.sentinelgaming.net/blog">Blog</a></li>
<li><a href="http://www.sentinelgaming.net/gallery">Media</a>
  <ul>
    <li><a href="http://www.sentinelgaming.net/gallery">Image Gallery</a></li>
    <li><a href="http://www.youtube.com/sentinelgamingyt">Videos</a></li>
    <li><a href="http://www.sentinelgaming.net/arcade">Arcade</a></li>					
  </li>
  </ul>
<li><a href="http://www.sentinelgaming.net/store">Store</a></li>
  </ul>
</nav></div>

Thanks for any help I can get, and to view this navigation bar as is, please visit http://www.sentinelgaming.net/testpage

[Stomme poes]

display: inline-table;

Yup, Firefox. Still crawling with old Nutscrape bugs.
https://bugzilla.mozilla.org/show_bug.cgi?id=63895

They spent 10 years even trying to decide if it was a bug, even though all other browsers didn't act this way.

You'll have to lose the table-stuff. Setting someone to display: table-something or display: something-table brings on all the properties the browser considers for tables and table elements. Meaning, the old Netscape bug kicks in. Your absolute-positioning isn't working because of it.

I'm not a big fan of the display: none, display: block method of submenus. You're already abso-poing the sub ul's so just let them sit offscreen (to the left if this is a western page... to the right if this is a rtl language page... or pull them down a bit and use clip on teh main menu) until :hover happens.

example menu the Javascript there is only to assist IE6, make it work with keyboard, and allow a slight mouse-off delay for shaky hands/crappy mice/non-mouse pointing devices. Your menu should work with keyboard too, ideally. It won't work with touch devices, so add redundancy (let each main menu item at the top lead users to a page which lists the submenu links).

[sgsecret]

Okay I took that out, but for some reason the bullet points arent alligning up with the menu items. It only occurs with firefox. Check out the page on firefox, http://www.sentinelgaming.net/testpage

[ronpat]

It may seem meaningless, but the page shows about 98 validation errors in HTML alone, some of which are stray tags.

Plus, the following string shows up in Firefox's rendering of the page:
<div style="display:none;"> <img src="//pixel.quantserve.com/pixel/p-0w_AfePa_1zJh.gif" border="0" height="1" width="1" alt="Quantcast"/> </div>

I'd seriously try to clean some of that up and see if it helps.

Another Firefox observation... the social media buttons disappear behind the foreground images when the page is narrowed.

[Stomme poes]

You're getting lucky even having list bullets showing up at all. Technically you shouldn't be able to show bullets on an element who's been changed from display: list-item to float. In fact there is a browser who just won't, I thought it was Firefox but it's not so maybe it was Internet Explorer. Also doesn't help that your anchors are display:block (it's good that they are display:block but if you temporarily give them background colours, you'll see how this affects the bullet placement).

If you want bullets, I would set list-style to none and use background images of bullets.

Also as ronpat said, clean your errors now or you will be continuously hunting down both real and fake bugs for weeks. Validator can't tell you everything that's wrong (such as the Mozilla bug above) but it can catch the dumbest typos and mistakes, which usually clears up lots of problems.

You don't have to remove everything the validator says is an error, so long as you fix everything that really is a real error that would cause parsing problems (meaning, I hope you understand each error the validator gives you and whether or not it's a "real" error).