1

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?

1
  • It'd be helpful to see the markup you already have but if I understand correctly you're trying to place the span inside an <a> link? If so why not just attach the background image to the link and add padding and min-height?
    – steveax
    Jul 29, 2012 at 1:19

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.