CSS Sprites Help

[BlaZe]

Alright, so I'm new in CSS. I was trying to reduce the number of HTTP Requests on RapidScene.ws by minimizing all the icons to CSS sprites and load them via one image. Currently I'm trying this out on the category icons.

This is the CSS which I made with the help of tutorials.

style.css

/* CSS Sprites By BlaZe */

/* Key to #nav classes
li.soft = Software
li.game = Games
li.mov = Movies
li.mus = Music
li.tv = TV Shows
li.gfx = Graphics
li.eb = eBooks
li.temp = Templates
li.script = Scripts
li.ps = Photoshop Resources
li.tut = Tutorials
li.xxx = Adult */

#cat li.soft,
#cat li.game,
#cat li.mov,
#cat li.mus,
#cat li.tv,
#cat li.gfx,
#cat li.eb,
#cat li.temp,
#cat li.script,
#cat li.ps,
#cat li.tut,
#cat li.xxx{
background:url('/custom/icon_sprites.png') no-repeat;
padding:0 0 0 19px;
}

/* Positioning */
li.soft {
background-position:0 0px;
padding-top:2px;
}
li.game {
background-position:0 -17px;
padding-top:2px;
}
li.mov {
background-position:0 -34px;
padding-top:2px;
}
li.mus {
background-position:0 -51px;
padding-top:2px;
}
li.tv {
background-position:0 -68px;
padding-top:2px;
}
li.gfx{
background-position:0 -85px;
padding-top:2px;
}
li.eb {
background-position:0 -102px;
padding-top:2px;
}
li.temp {
background-position:0 -119px;
padding-top:2px;
}
li.script {
background-position:0 -136px;
padding-top:2px;
}
li.ps {
background-position:0 -153px;
padding-top:2px;
}
li.tut {
background-position:0 -170px;
padding-top:2px;
}
li.xxx {
background-position:0 -187px;
padding-top:2px;
}

/* Again (litewarez tutorial) */

.sprite{background:url('/custom/icon_sprites.png');}
.icon{width:16px;}

.soft{height:17px; background-position:-0px -0px; padding-left:18px;}
.game{height:17px; background-position:-0px -17px; padding-left:18px;}
.mov{height:17px; background-position:-0px -34px;}
.mus{height:17px; background-position:-0px -51px;}
.tv{height:17px; background-position:-0px -68px;}
.gfx{height:17px; background-position:-0px -85px;}
.eb{height:17px; background-position:-0px -102px;}
.temp{height:17px; background-position:-0px -119px;}
.script{height:17px; background-position:-0px -136px;}
.ps{height:17px; background-position:-0px -153px;}
.tut{height:17px; background-position:-0px -170px;}
.xxx{height:17px; background-position:-0px -187px;} 

Displaying them :

<div class="sprite icon soft" /><a href="/softwares">Softwares</a></div>
<div class="sprite icon game" /><a href="/games">Games</a></div> 

Output :


So how do I fix it ?

BlaZe Reviewed by BlaZe on 16th Feb 2011. CSS Sprites Help Alright, so I'm new in CSS. I was trying to reduce the number of HTTP Requests on RapidScene.ws by minimizing all the icons to CSS sprites and load them via one image. Currently I'm trying this out on the category icons. This is the CSS which I made with the help of tutorials. style.css /* CSS Sprites By BlaZe */ /* Key to #nav classes li.soft = Software li.game = Games Rating: 5