CSS Sprites getting too much of the sprite, or none at all

[ViRTualTeRRoRisT]

EDIT: Tried to change the height to 27px as kennypu said was a problem, no luck yet.I have a sprite of icons, that i'm trying to get pieces of, so I can use them for navigation. However, it seems to get too much of the sprite, or none at all into the nav bars, Ive read many articles, watched many videos, and read many SO questions, but can't seem to fix it.The JSfiddle link is: http://jsfiddle.net/m5kbX/And the link for the sprite is: https://www.dropbox.com/s/t4fowiw1zda3qcq/icons.pngalso the html is:\[code\]<div id="header-right"> <ul id="navigation"> <li> <div class="nav-button"> <div id="schools"> </div> </div> <div class="nav-text"> Schools </div> </li> <li> <div class="nav-button"> <div id="professors"> </div> </div> <div class="nav-text"> Professors </div> </li> <li> <div class="nav-button"> <div class="Programs"> </div> </div> <div class="nav-text"> Programs </div> </li> <li> <div class="nav-button"> <div class="account"> </div> </div> <div class="nav-text"> My Account </div> </li> </ul> </div>\[/code\]and the CSS is:\[code\]#header-right{ float: right; width: 381px; height: 64px; background-image:url('http://localhost/gradebyme/gradebyme/public/img/midtile2.png'); background-repeat:repeat-x;}#navigation{ position: relative; background: url('http://localhost/gradebyme/gradebyme/public/img/icontest.png') no-repeat; margin: 0; padding: 0; list-style: none;}#navigation li{ width: 88px; height: 64px; display: inline-block; text-align: center;}.nav-button{ width: 88px; height: 40px;}.nav-text{ width: 88px; height: 24px; color:white;}#schools{ float: left; width: 37px; height: 26.75px; background-position: 0 0;}#professors{ float: left; width: 37px; height: 26.75px; background-position: 0 -27px;}#programs{ float: left; width: 37px; height: 26.75px; background-color: green; background-position: 0 -55px;}#account{ float: left; width: 37px; height: 26.75px; background-color: purple; background-position: 0 -83px;}\[/code\]the first spot with the sprite, is showing the first 2 and a half icons, and overflowing the container, while the rest, show nothing. Please help and give me as much advice about css sprites and css as possible! Learning is the best way! Not just fixing you know?