Browser Compatibility with nav bar's?

Posted 31 January 2013 - 01:12 PM

Hey guys, heard a lot of great stuff about your community so decided to try posting because I'm at wits end with this website.

the website can be found at www.myweb.lethbridgecollege.ab.ca/~s0432623 sorry for the long address, its a school thing.

If you look at it in Firefox, you'll see what I hope is a visually appealing navigation bar.....if you look at it in anything else, however....the navigation bar in particular is awful.

Everything is in em's and I was told that would fix it...but it didn't.

This is my html code for the banner and nav:


<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Blade Upton's User-Centered Interface Design</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>


<div id="banner">

Blade Upton's User-Centered Interface Design
<p id="subh2"> (Design and Title Subject to Change) </p>


<ul id="nav">
	<li><a href="#">Blog</a></li>
	<li><a href="#">Movies</a></li>
	<li><a href="#">Video Games</a></li>
	<li><a href="#">Whatever</a></li>
	<li><a href="#">Home</a></li>
</ul>


</div>

The css I'm sure u can see in your browser. Is there anyway I can make this look pretty in IE and Chrome specifically (everything else including mobile would be nice as well).

Thanks, hope I gave enough info.