Thread: CSS button issue

Hi,

I have created a background image for use on each button in a navigation for a site.

However, when added via CSS to the individual list items, the background button image shrinks relative to the width of the text used.

This looks odd because you end up with a number of buttons, all with different widths.

I have tried specifying a width equal to that of the existing image I am using, this doesn't seem to work.

Anyone know how I can specify the same width for all button backgrounds regardless of the width of the text?

I would also like to center the text on the button background.

Something like this, perhaps?

Edit this Fiddle - jsFiddle

Something like this, perhaps?

Edit this Fiddle - jsFiddle

Originally Posted by Mike Hopley

Sorry Mike, had to fork it: Edit this Fiddle - jsFiddle

I like the whole button clickable

Sorry Mike, had to fork it: Edit this Fiddle - jsFiddle

I like the whole button clickable

Originally Posted by Frinkky

Much better, and so do I!

Thanks guys. Will have a play around.

What element would you say makes the buttons the same width?

It's the width declaration on the li tag.