Proper Display of Sprites

[deeper]

Hi,
after CSS-coding for a sprite, comprehending three buttons (25x25px each) in a row, there was one final issue:
a-tags are inline-elements but they need height/width like block-elements. Giving them "display: block" they accept height/width, but - like block elements - appear vertically.

Usually you can solve this by display:inline-block or float: left.



But what about the almost same sprite, just placing the second button one "level" (25px) higher? Instead of B1 B2 B3 like this:
--B2
B1-B3

In terms of sprite-usage it just seems to be a question of correct background-position for three buttons within the sprite by giving two of them negative values for height.

Unfortunately even correct positions don't work and show them in a row:

.first-button {
background: url("sprite.png");
background-repeat: no-repeat;
background-position: 0 -25px;
}

.second-button {
background: url("sprite.png");
background-repeat: no-repeat;
background-position: -25px 0;

}

.third-button {
background: url("sprite.png");
background-repeat: no-repeat;
background-position: -50px -25px;

Again a conflict with block/inline-property of a-tags?
display: block --> vertically
display: inline-block or float-left --> horizontally IN ONE ROW

Checked it several times, positions, URL, ect. right buttons are shown, but on wrong positions.

[Fotiman]

I'm not entirely sure what you're asking. But the position on your third-button is incorrect if I understand what you were going for. Whether displayed inline or as a block, it doesn't matter. The background position is independent of that.

Here's an example that you can use:
CSS:

.horizontalSprite a {
 color: #fff;
 display: inline-block;
 width: 25px;
 height: 25px;
 overflow: hidden;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAZCAIAAAD2akRBAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwKEjMVyLksXwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAOUlEQVRYw+3PsQ0AMAjAMOj/P8MLDB0Qcg6I5Kz4Vq58vbgeISEhISEhISEhISEhISEhISEhIeGsBnqyAzEzOl2yAAAAAElFTkSuQmCC');
}
.horizontalSprite a.block {
 display: block;
}

.horizontalSprite a.R {
 background-position: 0 0;
}

.horizontalSprite a.G {
 background-position: -25px 0;
}

.horizontalSprite a.B {
 background-position: -50px 0;
}

.mixedSprite a {
 color: #fff;
 display: inline-block;
 width: 25px;
 height: 25px;
 overflow: hidden;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwKEwMiroDVlAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAASElEQVRYw+3RwQ3AMAwDMSv776wu4SB98AYQCChtZ6lMtqbO/DIsLCwsLCwsLCwsLCysR6WLW1MnYmFhYWFhYWFhYWFhYd3oA07CBWEAJ+pdAAAAAElFTkSuQmCC');
}

.mixedSprite a.block {
 display: block;
}

.mixedSprite a.R {
 background-position: 0 -25px;
}

.mixedSprite a.G {
 background-position: -25px 0;
}

.mixedSprite a.B {
 background-position: -25px -25px;
}

And corresponding markup:

<div class="horizontalSprite">
 <h2>Inline</h2>
 <a href="#" class="R">R</a>
 <a href="#" class="G">G</a>
 <a href="#" class="B">B</a>
 <h2>Block</h2>
 <a href="#" class="R block">R</a>
 <a href="#" class="G block">G</a>
 <a href="#" class="B block">B</a>
 
 <p>The above links use the following sprite image:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAZCAIAAAD2akRBAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwKEjMVyLksXwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAOUlEQVRYw+3PsQ0AMAjAMOj/P8MLDB0Qcg6I5Kz4Vq58vbgeISEhISEhISEhISEhISEhISEhIeGsBnqyAzEzOl2yAAAAAElFTkSuQmCC"/>
 </p>
</div>

<div class="mixedSprite">
 <h2>Inline</h2>
 <a href="#" class="R">R</a>
 <a href="#" class="G">G</a>
 <a href="#" class="B">B</a>
 <h2>Block</h2>
 <a href="#" class="R block">R</a>
 <a href="#" class="G block">G</a>
 <a href="#" class="B block">B</a>
 <p>The above links use the following sprite image:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwKEwMiroDVlAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAASElEQVRYw+3RwQ3AMAwDMSv776wu4SB98AYQCChtZ6lMtqbO/DIsLCwsLCwsLCwsLCysR6WLW1MnYmFhYWFhYWFhYWFhYd3oA07CBWEAJ+pdAAAAAElFTkSuQmCC"/>
 </p>
</div>

[Fotiman]

Sorry for the weird formatting. The data URLs contain the images, so you can see what the sprite images is, and how it's being used.