unordered list sprite placement & effecting links

This sprite was created using an unordered list, because doing it another way just wasn't working out. But now it's off center, and despite playing with different div widths, margins and padding, it still sits too far to the right.

http://i40.tinypic.com/28i3yu8.png

When I adjust the width of the div that contains this sprite image, or change the padding, it just brings part of it down to the next line, but still sits too far to the right.

http://i39.tinypic.com/mj01w6.png

Here's the html and css for the header div.

<div id="header">

<div id="navigation">

<ul>
<li class="about"><a href="about.html">About</a></li>
<li class="menu"><a href="menu.html">Menu</a>
<li class="home" style="width:248px;"><a style="width:248px;" href="index.html">Home</a>
<li class="contact"><a href="contact.html">Contact</a>
<li class="cateringOn"><a href="catering.html">Catering</a>
</ul>

</div>

</div>

#header{
width:850px;
height:200px;
margin:10x auto;
}

#navigation {
margin-right: 30px;
position:relative
}

#navigation li{
list-style:none;
float: left;
}

#navigation li, #navigation a{
display:block;
height:120px;
width:120px;
text-indent:-9999px;
}

.about{
left:0px;
background: url(images/bamboo_grove_sprite.png) -0px 0px;
opacity: 0.9;
margin-right: 10px;
}

.about a:hover{
background: url(images/bamboo_grove_sprite.png) 0 -125px;
opacity: 0.9;
margin-right: 10px;
}

.aboutOn{
left:0px;
background: url(images/about_sprite.png) -0px 0px;
opacity: 0.9;
margin-right: 10px;
}

.aboutOn a:hover{
background: url(images/about_sprite.png) 0 -125px;
opacity: 0.9;
margin-right: 10px;
}

.menu{
left:120px;
background: url(images/bamboo_grove_sprite.png) -120px 0px;
opacity: 0.9;
margin-right: 10px;
}

.menu a:hover{
background: url(images/bamboo_grove_sprite.png) -120px -125px;
opacity: 0.9;
margin-right: 10px;
}

.menuOn{
left:120px;
background: url(images/menu_sprite.png) -120px 0px;
opacity: 0.9;
margin-right: 10px;
}

.menuOn a:hover{
background: url(images/menu_sprite.png) -120px -125px;
opacity: 0.9;
margin-right: 10px;
}

.home{
left:244px;
background: url(images/bamboo_grove_sprite.png) -241px 0px;
opacity: 0.9;
margin-right: 10px;
}

.home a:hover{
background: url(images/bamboo_grove_sprite.png) -241px -119px;
opacity: 0.9;
margin-right: 10px;
}

.contact{
left:490px;
background: url(images/bamboo_grove_sprite.png) -490px 0px;
opacity: 0.9;
margin-right: 10px;
}

.contact a:hover{
background: url(images/bamboo_grove_sprite.png) -490px -125px;
opacity: 0.9;
margin-right: 10px;
}

.contactOn{
left:490px;
background: url(images/contact_sprite.png) -490px 0px;
opacity: 0.9;
margin-right: 10px;
}

.contactOn a:hover{
background: url(images/contact_sprite.png) -490px -125px;
opacity: 0.9;
margin-right: 10px;
}

.catering{
left:608px;
background: url(images/bamboo_grove_sprite.png) -612px 0px;
opacity: 0.9;
margin-right: 10px;
}

.catering a:hover{
background: url(images/bamboo_grove_sprite.png) -613px -125px;
opacity: 0.9;
margin-right: 10px;
}

.cateringOn{
left:608px;
background: url(images/catering_sprite.png) -610px 0px;
opacity: 0.9;
margin-right: 10px;
}

.cateringOn a:hover{
background: url(images/catering_sprite.png) -613px -125px;
opacity: 0.9;
margin-right: 10px;
}

Also, as soon as I coded the sprite, it changed my footer links as well (added the white background box to them,) despite those footer links having their own rules.

http://i44.tinypic.com/255i1yg.png

<div id="footer">

<a class="home" href="index.html">Home</a>
<a class="about" href="about.html">About</a>
<a class="menu" href="menu.html">Menu</a>
<a class="contact" href="contact.html">Contact</a>
<a class="catering" href="catering.html">Catering</a>
All Rights Reserved &copy; Bamboo Grove Hawaiian Grille


</div>

#footer{
width: 730px;
height: 25px;
margin: 100px 50px 25px 35px;
color: #FAD63B;
font-size: 12px;
text-align: center;
}

#footer a{
text-decoration: none;
font-size: 12px;
margin-right: 50px;
background-color: #97806D;
font-family: Trebuchet MS, Arial, sans-serif;
}

#footer a:link { color: #A2CAE2; }
#footer a:visited { color: #A2CAE2; }
#footer a:hover { color: #FAD63B; }
#footer a:active { color: #FAD63B; }

Sorry, I just realized putting my code in a scroll box makes things a lot easier:

Here's the first section:

<div id="header">

<div id="navigation">

<ul>
<li class="about"><a href="about.html">About</a></li>
<li class="menu"><a href="menu.html">Menu</a>
<li class="home" style="width:248px;"><a style="width:248px;" href="index.html">Home</a>
<li class="contact"><a href="contact.html">Contact</a>
<li class="cateringOn"><a href="catering.html">Catering</a>
</ul>

</div>

</div>

#header{
width:850px;
height:200px;
margin:10x auto;
}

#navigation {
margin-right: 30px;
position:relative
}

#navigation li{
list-style:none;
float: left;
}

#navigation li, #navigation a{
display:block;
height:120px;
width:120px;
text-indent:-9999px;
}

.about{
left:0px;
background: url(images/bamboo_grove_sprite.png) -0px 0px;
opacity: 0.9;
margin-right: 10px;
}

.about a:hover{
background: url(images/bamboo_grove_sprite.png) 0 -125px;
opacity: 0.9;
margin-right: 10px;
}

.aboutOn{
left:0px;
background: url(images/about_sprite.png) -0px 0px;
opacity: 0.9;
margin-right: 10px;
}

.aboutOn a:hover{
background: url(images/about_sprite.png) 0 -125px;
opacity: 0.9;
margin-right: 10px;
}

.menu{
left:120px;
background: url(images/bamboo_grove_sprite.png) -120px 0px;
opacity: 0.9;
margin-right: 10px;
}

.menu a:hover{
background: url(images/bamboo_grove_sprite.png) -120px -125px;
opacity: 0.9;
margin-right: 10px;
}

.menuOn{
left:120px;
background: url(images/menu_sprite.png) -120px 0px;
opacity: 0.9;
margin-right: 10px;
}

.menuOn a:hover{
background: url(images/menu_sprite.png) -120px -125px;
opacity: 0.9;
margin-right: 10px;
}

.home{
left:244px;
background: url(images/bamboo_grove_sprite.png) -241px 0px;
opacity: 0.9;
margin-right: 10px;
}

.home a:hover{
background: url(images/bamboo_grove_sprite.png) -241px -119px;
opacity: 0.9;
margin-right: 10px;
}

.contact{
left:490px;
background: url(images/bamboo_grove_sprite.png) -490px 0px;
opacity: 0.9;
margin-right: 10px;
}

.contact a:hover{
background: url(images/bamboo_grove_sprite.png) -490px -125px;
opacity: 0.9;
margin-right: 10px;
}

.contactOn{
left:490px;
background: url(images/contact_sprite.png) -490px 0px;
opacity: 0.9;
margin-right: 10px;
}

.contactOn a:hover{
background: url(images/contact_sprite.png) -490px -125px;
opacity: 0.9;
margin-right: 10px;
}

.catering{
left:608px;
background: url(images/bamboo_grove_sprite.png) -612px 0px;
opacity: 0.9;
margin-right: 10px;
}

.catering a:hover{
background: url(images/bamboo_grove_sprite.png) -613px -125px;
opacity: 0.9;
margin-right: 10px;
}

.cateringOn{
left:608px;
background: url(images/catering_sprite.png) -610px 0px;
opacity: 0.9;
margin-right: 10px;
}

.cateringOn a:hover{
background: url(images/catering_sprite.png) -613px -125px;
opacity: 0.9;
margin-right: 10px;
}

And the second:

<div id="footer">

<a class="home" href="index.html">Home</a>
<a class="about" href="about.html">About</a>
<a class="menu" href="menu.html">Menu</a>
<a class="contact" href="contact.html">Contact</a>
<a class="catering" href="catering.html">Catering</a>
All Rights Reserved &copy; Bamboo Grove Hawaiian Grille


</div>

#footer{
width: 730px;
height: 25px;
margin: 100px 50px 25px 35px;
color: #FAD63B;
font-size: 12px;
text-align: center;
}

#footer a{
text-decoration: none;
font-size: 12px;
margin-right: 50px;
background-color: #97806D;
font-family: Trebuchet MS, Arial, sans-serif;
}

#footer a:link { color: #A2CAE2; }
#footer a:visited { color: #A2CAE2; }
#footer a:hover { color: #FAD63B; }
#footer a:active { color: #FAD63B; }

This sprite was created using an unordered list, because doing it another way just wasn't working out. But now it's off center, and despite playing with different div widths, margins and padding, it still sits too far to the right.

Your probably seeing the ul's default 40px left padding.

Try fixing that by adding this bit to your CSS #navigation ul {padding: 0;}

You really need to start using the code tags, [code][/code]

Yeah, I just realized I was wrapping my code wrong; sorry about that. Thank you, it worked!

Any idea as to why it would be effecting the footer links as well, and how to correct for that?

Any idea as to why it would be effecting the footer links as well, and how to correct for that?

You give your #footer anchors the same class as your #navigation li.

For example, .about{
left:0px;
background: url(images/bamboo_grove_sprite.png) -0px 0px;
opacity: 0.9;
margin-right: 10px;
}

Would style both <li class="about"><a href="about.html">About</a></li> and <a class="about" href="about.html">About</a>