• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 333
  • Last Modified:

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

My test page:


HTML attached, relevant CSS is:


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:


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>

Open in new window

Brad Bansner
Brad Bansner
  • 2
1 Solution
Jesse MatlockUX EngineerCommented:
Try this, it should fix it across browsers ;)

li.mainlinks{position:relative;display:inline;margin:0px;padding:0px;font-family:Myriad,Helvetica,Arial,sans-serif;height: 42px;width: 125px;}
li.mainlinks a {
	display: block;
	float: left;
	padding: 0;
	height: 42px;
	width: 125px;
li.mainlinks img {
	margin: 0;
	outline: none;
	border: none;

Open in new window

Brad BansnerWeb DeveloperAuthor Commented:
Crazy what you have to go through, but now I will have these for the future and other projects. Thank you!
Jesse MatlockUX EngineerCommented:
anytime! The easiest thing I have found when dealing with a horizontal menu, is to have the LI's inline, and the A links within them floating left. You have to be sure to have the LI's inline, or else IE will stagger them across the page like stairs LOL..

best of luck to you!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now