Question

I have 3 CSS functions for sprites and I created a link with them. When an image is loaded, they are like that

Some of my code is below:

#twitterReply
{
  width:16px;
  height:16px;
  text-decoration:none;
  display:block;
  background-image:url('path');
  background-position:-0px -0px;

}
#twitterReply:hover,#twitterReply:active  { background-position:-16px -0px; }

#twitterRetweet
{
  width:16px;
  height:16px;
  text-decoration:none;
  display:block;
  background-image:url('path');
  background-position:-32px -0px;
}
#twitterRetweet:hover,#twitterRetweet:active  { background-position:-48px -0px; }

#twitterFavorite
{
  width:16px;
  height:16px;
  text-decoration:none;
  display:block;
  background-image:url('path');
  background-position:-64px -0px;
}
#twitterFavorite:hover,#twitterFavorite:active  { background-position:-80px -0px; }

How can I lay them together?

Answer 1

They all have display: block, that’s why. Blocks occupy the full width of their parent element, thus a sequence of blocks looks like a stack.

Use display: inline-block instead.