图像不会在导航栏上正确显示

Question

Ok so here goes ive spent a good deal of time trying to find a tutorial for this kind of navbar (sprite rollover) i finaly found one that almost works would anyone be able to help me? the issue that im having is that the images for my buttons arnt showing up in design view at all, they will show up if i take the site live but its not showing the full image, its only showing a small amount of each button behind the text link. Thank you in advance. here is the code

HTML

    <div 
        id="toptop"><img src="css/img/header-top.gif" width="950" height="51">
    </div>

    <div 
        id="topmiddle"><img src="css/img/header-middle.gif" width="950" height="199">
    </div>


    <ul class="navbar">
    <li class="home"><a href="home">index.html</a></li>
    <li class="health"><a href="health">health.html</a></li>
    <li class="workouts"><a href="workouts">workouts.html</a></li>
    <li class="diet"><a href="diet">diet.html</a></li>
    <li class="lifestyle"><a href="lifestyle">lifestyle.html</a></li>
    <li class="news"><a href="news">news.html</a></li>
    <li class="forum"><a href="forum">forum.html</a></li>
    <li class="contact"><a href="contact">contact.html</a></li>
    </ul>       

</body>

CSS

  .navbar {
    display: inline-block;
    position: absolute;
    height: 55px;
    width: 950px;
}


.home {
    float: left;
    height: 55px;
    width: 115px;
    position: relative;
}
.health {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.workouts {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.diet {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.lifestyle {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.news {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.forum {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.contact {
    float: left;
    height: 55px;
    width: 115px;
    position: relative;
}
.home a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.health a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -115px 0px;
}
.workouts a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -235px 0px;
}
.diet a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -355px 0px;
}
.lifestyle a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -475px 0px;
}
.news a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -595px 0px;
}
.forum a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 715px 0px;
}
.contact a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 830px 0px;
}
.home a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 0px -55px;
}
.health a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -115px -55px;
}
.workouts a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -235px -55px;
}
.diet a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -355px -55px;
}
.lifestyle a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -475px -55px;
}
.news a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -595px -55px;
}
.forum a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -715px -55px;
}
.contact a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -830px -55px;
}
.home a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 0px -110px;
}
.health a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -115px -110px;
}
.workouts a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -235px -110px;
}
.diet a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -355px -110px;
}
.lifestyle a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -475px -110px;
}
.news a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -595px -110px;
}
.forum a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -715px -110px;
}
.contact a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -830px -110px;
}

Answer 1

First off why not do something like this:

<ul class="navbar">
   <li><a href="#">Some link></li>
</ul>

And then in the CSS you can style all of them using:

.navbar li
{
  float: left;
  height: 55px;
  width: 115px;
  position: relative;
} 
.navbar li a
{
  background-image:"someimage.png";
}