Problems using button links in header with Internet explorer

So of course as many have posted in the past.. It looks great in Firefox but not IE..

I am attempting to use links in the header of my wordpress blog.. I am using the default kubrick theme.. The links work but part of the page is shifted to the right (the background that uses the kubrickbg-ltr.jpg image)

I am using the following code

For header.php

<div>
<ul id="nav">
<li id="about"><a href="https://www.isintu.com/about.html">About</a></li>
<li id="events"><a href="https://www.isintu.com/events.html">Events</a></li>
<li id="gallery"><a href="https://www.isintu.com/gallery.html">Gallery</a></li>
<li id="contact"><a href="https://www.isintu.com/contact.html">Contact</a></li>
</ul>
</div>

for style.css

#nav {
	margin: 20px;
	padding: 2px;
	height: 30px;
	list-style: none;
	display: inline;
	overflow: hidden;
	}

#nav li {
	margin: 20px;
	padding: 1px;
        list-style: none;
	display: inline;
	}

#nav a {
	float: left;
	padding: 30px 2px 0 0;
	overflow: hidden;
	height: 0px !important;
	height /**/:30px; /* for IE5/Win only */
	}

#nav a:hover {
	background-position: 0 -30px;
	}

#nav a:active, #nav a.selected {
	background-position: 0 -60px;
	}

As you see i am using css to position the button and give it a rollover effect.

I’m not too familiar with writing css or php but i get by. I’m wondering if there is some extra code that i can use to fix the problem in IE or if this code is completely unusable (if so then point me in the right direction)

I’ve used image maps and they work but, i want to maintain that rollover effect..