dynamic highlighting

Hi! For my theme I did dynamic highlighting so that when you are viewing a page the link will have its own class. For some reason it is not working on my website: https://mikewgd.net – Im using image rollovers and for the current state I just changed the background position and it was working when I did plain old CSS and XHTML but when I put it into WordPress its not working. Here is what I have in my header and the css information:

<div id="searchnav">
			<div id="search">
				<?php include (TEMPLATEPATH . '/searchform.php'); ?>
			</div>
			<ul id="nav">
                <li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="https://localhost:8888/" class="home" title="Home">home</a></li>
                <li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="https://localhost:8888/about/" class="about" title="About">about</a></li>
                <li<?php if ( is_page('portfolio') || is_page('websites') || is_page('motion') || is_page('video') || is_page('graphics') ) { echo ' class="current"'; } ?>><a href="https://localhost:8888/portfolio" class="portfolio" title="Portfolio">portfolio</a></li>
                <li<?php if ( is_page('contact') ) { echo ' class="current"'; } ?>><a href="https://localhost:8888/contact" class="contact" title="Contact">contact</a></li>
			</ul>
		</div> <!--end of searchnav-->

#nav {padding:8px 50px 0 0;margin:0;list-style-type:none;float:right; }
	#nav li {background: none;padding: 0;outline:none;float: left;border:0px solid black;}
	#nav a {width: 99px;height: 46px;outline:none;text-indent: -900em;display: block;}
	#nav .current {background-position:0 -100px;outline:none;border:0;}
	#nav a:hover {background-position:0 -50px;outline:none;border:0;}
	#nav .home {background: url(images/nav-home.gif) no-repeat;outline:none;}
	#nav .about {background: url(images/nav-about.gif) no-repeat;margin:0 22px 0 0;outline:none;}
	#nav .portfolio {background: url(images/nav-portfolio.gif) no-repeat;margin:0 28px 0 0;outline:none;}
	#nav .contact {background: url(images/nav-contact.gif) no-repeat;outline:none;}

So if someone could help me out that would be great and also if someone could tell me why there is a break in IE – for some reason the padding does not work and the center align does not work, I put margin: 0 auto; and that is suppose to center everything but in IE it doesnt do it.

Thanks!