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

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>

Open in new window

0
bbdesign
Asked:
bbdesign
  • 2
1 Solution
 
Jesse MatlockUX EngineerCommented:
Try this, it should fix it across browsers ;)

ul.mainlinks{padding:0px;}
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

0
 
bbdesignAuthor Commented:
Crazy what you have to go through, but now I will have these for the future and other projects. Thank you!
0
 
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!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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