Search code examples
rolloverspritecss

how to elegantly use css sprites in an inline element?


I'm aware of this hack for inline-block property, but as it really is a hack for the poor browser support, I was wondering if there is a more elegant solution to use CSS sprites without the necessary line-break of block elements.

To illustrate the idea: in the footer of this website the icons which are inside the footer-text paragraph at the very right bottom of the page should get a nice rollover image. The most elegant technique I know for this is CSS sprites, but that would of course add a line break before the images.

Am I missing something?

Any insight is much appreciated!

Best, Alex


Solution

  • Personally I inline-block hack stuff all over the place, but if you're looking for an alternative, the answer is right on the page you use for an example, in the other social icons list nearer to the top of the page.

    Just use display: block and float the links.