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

Question

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.png

also the html is:

<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>

and the CSS is:

#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;
}

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?

Answer 1

Ok, there were a multitude of things wrong with this, from bad css selectors(case matters, and id's and classes are different!) to the background image not being applied to the correct elements...

I have debugged it to work as I think it should from the original code: updated Fiddle, to get the fiddle to work, download the sprite supplied by the poster and put into your 'localhost/img' directory on your computer with a local server running, like WAMP.

HTML:

<div id="header-right">
    <ul id="navigation">
        <li id="schools" class="nav-text">
            <div class="nav-button">
            </div>
            Schools
        </li>
        <li id="professors" class="nav-text">
            <div class="nav-button">
            </div>
            Professors
        </li>
        <li id="programs" class="nav-text">
            <div class="nav-button">
            </div>
            Programs
        </li>
        <li id="account" class="nav-text">
            <div class="nav-button">
            </div>
            My Account
        </li>
    </ul>
</div>​

CSS:

#header-right{
    float: right;
    width: 381px;
    height: 64px;
    background-image:url('http://localhost/img/midtile2.png');
    background-repeat:repeat-x;
    background-color: grey;
    border: 1px solid;
}

#navigation{
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

#navigation li{
    display: inline-block;    
    float: left;
    text-align: center;    
    width: 88px;
    height: 64px;
}

#navigation li .nav-button{    
    background-image: url('http://localhost/img/icons.png');
    background-repeat: no-repeat;    
    width: 37px;
    height: 27px;
    margin: 0 auto 13px;

}
.nav-text{
    color: white;
}

#schools .nav-button{
    background-position: 0 0;
}

#schools .nav-button:hover{
    background-position: -37px 0;
}

#schools .nav-button:active{
    background-position: -74px 0;
}

#professors .nav-button{
    background-position: 0 -27px;
}

#professors .nav-button:hover{
    background-position: -37px -27px;
}

#professors .nav-button:active{
    background-position: -74px -27px;
}

#programs .nav-button{
    background-position: 0 -55px;
}

#programs .nav-button:hover{
    background-position: -37px -55px;
}

#programs .nav-button:active{
    background-position: -74px -55px;
}

#account .nav-button{
    background-color: black;
    background-position: 0 -83px;
}

#account .nav-button:hover{
    background-position: -37px -83px;
}

#account .nav-button:active{
    background-color: #1ca4de;
    background-position: -74px -83px;
}

Answer 2

you havent given them the background.

    #schools{
        float: left;
        width: 37px;
        height: 26.75px;
        background-position: 0 0;
background: ????
    }

    #professors{
        float: left;
        width: 37px;
        height: 26.75px;
        background-position: 0 -27px;
background: ????
    }

    #programs{
        float: left;
        width: 37px;
        height: 26.75px;
        background-color: green;
        background-position: 0 -55px;
background: ????
    }

    #account{
        float: left;
        width: 37px;
        height: 26.75px;
        background-color: purple;
        background-position: 0 -83px;
background: ????
    }