UPDATE: Attempted to adjust the height to 27px as recommended by kennypu, but still facing issues.
I am working with a sprite containing multiple icons that I want to extract for navigation purposes. Unfortunately, I'm struggling to properly display portions of the sprite in my navigation bars. Despite reading numerous articles, watching tutorials, and browsing through Stack Overflow questions, I haven't been able to solve this issue.
You can find the JSFiddle link here: http://jsfiddle.net/m5kbX/
And the link to the sprite image is:
Here is the HTML 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>
And the CSS 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;
}
The first section displaying the sprite is showing part of two icons and overflowing the container, while the remaining sections are not displaying anything. I would appreciate any help and advice regarding CSS sprites and general CSS techniques! Learning from experience is invaluable!