Question

I have a sprite, consisting of 4 bubbles that I will use for the selected version of my navigation, that looks like this:

The best example of what I’m trying to achieve that I can find is Dribbble. Look at the header navigation selected navigation. They are using a bubble similar to mine to cover the “Jobs” link, except they use pure css to achieve the look, whereas I’m using images.

Here’s my code:

.inline-block{
  /* Inline block class for li navigation */
  display:-moz-inline-stack;
  display:inline-block;
  zoom:1;
  *display:inline;
}
#header li a{
  width:40px;   /* without padding = 110px*/
  height:15px;  /* without padding = 31px*/
  padding:8px 35px;
}
#header li a.selected{
  background: url('../img/btn-header-sprite.png') 0 -1px;
  display:inline-block;
}
#header li a{
  color:#FFF;
  font-weight:bold;
  font-size:15px;
}
#header li:hover{
  background-position:0 -34px;
}
#header li:active{
  background-position:0 -67px;
}

Right now it looks like this:

I’m having to individually align the padding for each one, and as you can see, if the padding is not correct, the text is not centered in the bubble. Is there a better way to format this, than individually giving padding to each bubble?

Thanks for all help! If you need more clarification, just say!

Answer 1

You can try

display:table-cell;
vertical-align: middle;