CSS Navigation Sprite - Odd Shapes (not square)

Question

I usually have no problems with making CSS sprites, but this one has got me stumped...and I'm not sure how to solve it. Basically I have a navigation sprite that looks like this:

I'm using the standard convention of laying them out in <li> tags such like:

<li class="welcome"><a href="#" title="welcome">welcome</a></li>

And then applying CSS to adjust the background position:

#navigation li.welcome a {
  width:155px;
  background-position:-0px -46.5px; }

Of course I didn't think of this, but the problem happens on hover. Since you can only define "square" areas, when you hover over an element, the "blue" hover state is being carried over to the next navigation item.

I then thought that I'd have to make individual images for each item... but that wouldn't work quite right either because of the overlapping arrow sections.

Maybe I have to seperate out the "in between" arrow seperators? I'm really not sure.

I'm stumped here. Any ideas?

Answer 1

I think you're right about having to cook up a 'clever' image which covers all your requirements.

It's difficult to explain in words, here's a link to an example: http://www.alistapart.com/d/sprites/ala-blobs2.html

Here's the link to how it's done (scroll down to 'Irregular shapes') : http://www.alistapart.com/articles/sprites

Answer 2

Could you recreate the sprite so that the navigation buttons are stacked vertically? Then it seems you could use negative left margins to fit the buttons together. This way, the negative space on the left side of the button would be empty, rather than have an arrow tip in it, so on hover, the cavity would remain transparent.