Reputation: 9752
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?
Upvotes: 1
Views: 72
Reputation: 72385
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.
Upvotes: 1