Inline stretchy button with CSS background image

Question

Anyone know if there's a bullet-proof (standards-compliant to XHTML1.1 strict, cross-browser, non-javascript) way to use CSS and background images to turn an inline link into a visual button that will stretch to accommodate different amounts of text (or text resizing)?

I'm thinking I need to use background images as the designer's buttons have rounded corners with a different coloured border. It must work in IE6 (Government job).

Im pretty sure the answer is no, but as always thought it worth a check.

Amongst other things, I've already tried variations on the sliding doors technique, but can't make it work as the solution needs to work inline (i.e. within a paragraph) and I can't set a fixed width.

EDIT: There are several buttons, each of which has a different colour for foreground, border and background. They also have a gradient 'face', but no need for transparency or anything else 'unorthodox'. Unfortunately I can't link to examples as I'm under an NDA.

Answer 1

Yeah, you probably need to make image buttons for this.

Answer 2

I'm not sure if this will fit your needs, but I helped someone with hoverable rounded buttons in this post... it uses only HTML and CSS.

Answer 3

I don't think you can do this within your restrictions. The problem is that you have one element, but to properly do stretching, you need three (unstretched left side, stretched center, unstretched right side).

Answer 4

I've ended up fixing it by using a variation of the sliding doors technique documented very nicely here. Basically, the difference between it and what I had been doing was this version uses the CSS property "display: inline-block".

Answer 5

Just as an aside in future, here's a page on CSS button styling.