how can I create a hover image that expands with text length in a menu?

I have a开发者_如何学Go menu with 5 items of varying text length - home, about us, contact us, etc In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks

add a css rule to #main-nav li a{ min-width: 105px;}

I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you

The buttons aren't wide enough for the background image.

Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.

You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.

If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.

A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.

Here is a pure CSS solution...

http://jsfiddle.net/wdm954/tAaCF/1/

Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.