nyxthulhu
nyxthulhu

Reputation: 9752

HTML for sprites

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

What do other people use for sprites inside links?

Upvotes: 1

Views: 72

Answers (1)

methodofaction
methodofaction

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

Related Questions