List works fine in IE7 but not in Firefox 3

I am so annoyed. My list layout works fine in IE7, but is all messed up in Firefox. Everything is CSS based so I am sure that is where the problem is, but I just can't figure it out.

Here is how my layout looks in IE7:



Here is how my layout looks in Firefox 3:



As you can see the tabs are further over in FF3 than they are in IE7.

Here is the CSS that relates to this: (I know it is kind of long, sorry.)

#navigation {
	margin: 0px 0px 0px 13px;
	height: 25px;
}
#navigation ul {
	float:left;
	margin: 0px auto;
	list-style: none;
	width: 600px;
	height: 25px;
}
#navigation li {
	height: 25px;
	float: left;
	margin-right: 0px;
}
#home {
	display:block;
	background:url(images/home.gif) no-repeat;
	width:99px;
	height:22px;
}
#home:hover {
	display:block;
	background:url(images/home_over.gif) no-repeat;
	width:99px;
	height:22px;
}
#events {
	display:block;
	background:url(images/events.gif) no-repeat;
	width:99px;
	height:22px;
}
#events:hover {
	display:block;
	background:url(images/events_over.gif) no-repeat;
	width:99px;
	height:22px;
}
#donate {
	display:block;
	width:99px;
	height:22px;
	background: url(images/donate.gif) no-repeat;
}
#donate:hover {
	display:block;
	width:99px;
	height:22px;
	background: url(images/donate_over.gif) no-repeat;
}
#resources {
	display:block;
	width:99px;
	height:22px;
	background: url(images/resources.gif) no-repeat;
}
#resources:hover {
	display:block;
	width:99px;
	height:22px;
	background: url(images/resources_over.gif) no-repeat;
}
#volunteer {
	display:block;
	width:99px;
	height:22px;
	background: url(images/volunteer.gif) no-repeat;
}
#volunteer:hover {
	display:block;
	width:99px;
	height:22px;
	background: url(images/volunteer_over.gif) no-repeat;
}
#contact {
	display:block;
	width:99px;
	height:22px;
	background: url(images/contact.gif) no-repeat;
}
#contact:hover {
	display:block;
	width:99px;
	height:22px;
	background: url(images/contact_over.gif) no-repeat;
}

Code (markup):

Here is the html:

<div id="navigation">
        	<ul>
            	<li><a id="home" href="index.html" title="Home"></a></li>
                <li><a id="events" href="events.html" title="Events"></a></li>
                <li><a id="donate" href="donate.html" title="Donate"></a></li>
                <li><a id="resources" href="resources.html" title="Resources"></a></li>
                <li><a id="volunteer" href="volunteer.html" title="Volunteer"></a></li>
                <li><a id="contact" href="contact.html" title="Contact"></a></li>
            </ul>
        </div>

HTML:

I hope some one here can help. I am sure that this has been covered before and yes I have searched, but I just can't find what I need to fix this.

Thank you for any help you can give,

Brandon

 

IE and Opera indent lists with left margin, while Gecko and KHTML/Webkit browsers (eg, Firefox and Safari) use left padding.

You need to zero the padding on the ul.

cheers,

gary

 

Sweet! Thank you very much Gary that worked perfectly.

Brandon