Hi I am trying to place an image behind a list item for my navigation and as you can see not having great success. I would appreciate any help. This is my code:
HTML
<div id="navigation">
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="aboutUs.html">About Us</a></li>
<li><a href="ourAircraft.html">Our Aircraft</a></li>
<li><a href="safaris.html">Air Safaris</a></li>
<li><a href="charterFlights.html">Charter Flights</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="photoGallery.html">Photo Gallery</a></li>
<li><a href="contactUs.html" class="first">Contact Us</a></li>
</ul>
</div><!--END of navigation-->
CSS
#navigation {
width:900px;
padding: 0 0 0 0;
margin: -28px auto 10px;
border-bottom-width: 20px;
border-bottom-style: solid;
border-bottom-color: #000;
}
#navigation ul{
margin:0 auto;
padding:0;
height:2em;
list-style:none;}
#navigation li{
display:inline;
background-image:url(../images/tabBg.png);
background-repeat: no-repeat;
margin:0;
padding:5px 12px 8px 12px;}
#navigation li a{
text-decoration:none;
font: .8em/1em Verdana, Arial, Helvetica, sans-serif;
color: #000;
height:30px;
padding: 10px;
margin: 0;}