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

Posted on 2011-10-18
Last Modified: 2012-05-12
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="" 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

Question by:bbdesign
    LVL 8

    Accepted Solution

    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


    Author Comment

    Crazy what you have to go through, but now I will have these for the future and other projects. Thank you!
    LVL 8

    Expert Comment

    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!

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    24 Experts available now in Live!

    Get 1:1 Help Now