Question

So I’ve setup Compass for creating automatic sprites with SCSS. All goes well, it generates some nice CSS for me :-

.icons-sprite, .actions-new, .actions-edit, .actions-save, .actions-delete, .actions-refresh {
  background: url('/content/themes/admin/images/icons-s0336d5eb89.png') no-repeat;
}

.actions-new {
  background-position: 0 -48px;
}

... ... ...

Now I am creating a table, and in that table there is a “Action column” where you can perform functions on rows (delete or edit).

What is the generally accepted way (in html 5) for showing these buttons using sprites?

I’ve explored a few options and ran into a few problems

• span I can’t get this to show unless I place it in display: block mode and if I do that it inserts new lines after the item, and I don’t want to have to float everything

• div for some reason this one doesn’t even show

• img The biggest issue I am seeing with this one is the requirement for a src field, this means that I need to duplictate the url over and over again.

What do other people use for sprites inside links?

Answer 1

Use span and display: inline-block. This will make the span behave like an image, so you can apply vertical-align: middle. Support goes all the way back to IE6 if you use it on an inline element.