[dannynosleeves]

So i always have this problem and always forget the solution.

Im using an unordered list for a horizontal navigation. But I cant get the images to displat side-by-side.



Here is the code

/***********************************NAVIGATION***/

ul#nav-main {
	position: absolute;
	top:137px;
	left:220px;
	width:600px;
	height:52px;
	background-color:#99FF33;
	margin: 0;
	}

ul#nav-main li {
	display:inline;
	line-height:52px;
	
	}
	

li#home a {
	display:block;
	width:115px;
	background-image: url(../images/images/home.png);
	text-indent:-99999px;	
	}

	
li#about a {
	display:block;
	width:99px;
	background-image:url(../images/images/about.png);
	text-indent:-99999px;	
	}

li#calendar a {
	display:block;
	width:145px;
	background-image:url(../images/images/calendar.png);
	text-indent:-99999px;	
	}
	
li#forms a {
	display:block;
	width:106px;
	background-image:url(../images/images/forms.png);
	text-indent:-99999px;	
	}
	
li#contact a {
	display:block;
	width:135px;
	background-image:url(../images/images/calendar.png);
	text-indent:-99999px;	
	}

<!--BRANDING-->
<div id="branding">
	<h1>Off the Walls</h1>
	<blockquote>North Alabams largest indoor entertainment facility.</blockquote>

<!--NAVIGATION-->

	<h2>Site Navigation</h2>
	<ul id="nav-main">
    	<li id="home"><a href="#" title="Home">home</a></li>
        <li id="about"><a href="#" title="About">about</a></li>
        <li id="calendar"><a href="#" title="Calendar">calendar</a></li>
        <li id="forms"><a href="#" title="Forms">forms</a></li>
        <li id="contact"><a href="#" title="Contact">contact</a></li>
	</ul>
</div> 
<!--end of branding div-->