I'm getting fed up with peoples lack of thinking about how to code sprites.
Time and time again I've just seen messy CSS coding.
their calling the image every button so its like:
.button1{
background:transparent url('sprite.png') -100 -50 no-repeat;
height:30px;
width:150px;
overflow:hidden;
position:relative; }
.button2{
background:transparent url('sprite.png') -100 -80 no-repeat;
height:30px;
width:150px;
overflow:hidden;
position:relative; }
No no no no no no no no no no in my opinion that is shit coding.
This is how I would do it and how I see it being faster and lighter coding with easier methods of calling it.
.spriteBG{
background:transparent url('sprite.png') no-repeat;
overflow:hidden;
position:relative; }
.button1{
background-position: -100 -50;
height:30px;
width:150px; }
.button2{
background-potition: -100 -80;
height:30px;
width:150px; }
That just their is cutting out a lot of work for you and the advantage of having spriteBG class is you can later on change your PNG to say a GIF easily in a IE6 css file.
Then your sprites are cross browser compatible.
Please correct me if I'm wrong but is the 1st example a example of plain shit coding not being thought through?