how to get rid of extra space between CSS inline LI elements

My test page:

http://www.edaefca.org/new

HTML attached, relevant CSS is:

ul.mainlinks{padding:0px;}
li.mainlinks{position:relative;display:inline;margin:0px;padding:0px;}

The main buttons at the top... why do some browsers (I'm viewing in Safari) put spaces between the buttons, even though I have all the margins and padding set to zero? I believe its caused by the white space between my <li> elements.

I have solved this in the past by running my <li> elements together without any white space between, like:

<li></li><li></li><li></li><li></li><li></li><li></li><li></li>

But that seems ridiculous and makes the code difficult to read. Is there a more elegant way to have my buttons aligned directly next to each other? I don't understand why browsers render it like that.

Thank you!

<ul class="mainlinks">
	<li class="mainlinks"><a href="http://www.faithstepscampaign.org" target="_blank"><img src="art/bt_1.jpg" alt="FaithSteps Campaign" width="125" height="42" border="0" /></a></li>
	<li class="mainlinks"><a href="faithsteps-ministries.asp"><img src="art/bt_2.jpg" alt="FaithSteps Ministries" width="125" height="42" border="0" /></a></li>
	<li class="mainlinks"><a href="church-planting.asp"><img src="art/bt_3.jpg" alt="Church Planting" width="125" height="42" border="0" /></a></li>
	<li class="mainlinks"><a href="urban-intercultural-ministry.asp"><img src="art/bt_4.jpg" alt="Urban/Intercultural Ministry" width="125" height="42" border="0" /></a></li>
	<li class="mainlinks"><a href="immigrant-hope.asp"><img src="art/bt_5.jpg" alt="Immigrant Hope" width="125" height="42" border="0" /></a></li>
	<li class="mainlinks"><a href="support-opportunities.asp"><img src="art/bt_6.jpg" alt="Support Opportunities" width="125" height="42" border="0" /></a></li>
	<li class="mainlinks"><a href="resources.asp"><img src="art/bt_7.jpg" alt="Resources" width="125" height="42" border="0" /></a></li>
	<li class="mainlinks"><a href="registrations.asp"><img src="art/bt_8.jpg" alt="Registrations" width="125" height="42" border="0" /></a></li>
</ul>

Select allOpen in new window