CSS repeating bg for button

Hi,
I am trying to create buttons with css and html with the text on the buttons being html links.

Have a look at what I am trying to create in the screen shot.
I know I wont be able to use the font in html so I will use Verdana. I have tried creating an unordered list and displaying inline with styling but cant achieve to effect.

I have taken a sliver of the image for the background and repeated it across. How do I get the 'endcaps' of the button, will i insert images for these?

I could take the whole image and put it in the background but I do not want to do this because the buttons will be different lengths. Also the buttons will be localised eventually so they will be unpredictable lengths.

Any ideas?

Attached Images

buttons.gif (1,020 Bytes, 32 views)

Why don't you do the whole thing a link?!

Use this method : Pure CSS rollovers without Javascript

The content will be localised into different languages in the future, this means that to have images for different links in all languages would be a lot of work.

It is also going to go into a system of CMS so that users can customise their own navigation.

If there is a way of doing this with CSS/HTML rather than just cutting and linking images it would be a lot more ideal...

If you dont need the end caps you could always do it like this one i wrote.

http://www.williamrivero.co.nr

Don't copy the code, it's too messy.